flutter )) UI 구성하는 기본 단위 Widget

위젯 이란

 

화면을 만들어주는 요소이다.

위젯은 

icon, text와 같은 눈에 보이는 요소와,

margin, padding과 같은 눈에 보이지 않는 요소가 있다.

 

이런 위젯을 트리 형식으로 조합해 화면을 만든다.

 

기본적인 Widgt 사용 예제

import 'package:flutter/material.dart';

class Practice extends StatelessWidget {
  const Practice({super.key});

  @override
  Widget build(BuildContext context) {
    var _checkbox = true;
    var _radiobtn = true;
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(5.0),
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: [
              Row(
                children: [
                  Checkbox(
                      value: _checkbox,
                      onChanged: (value) {
                        _checkbox = value!;
                      }),
                  const Text(
                    'check box',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

checkbox 버튼과 fiterChip 버튼이다. tap하면 체크가 풀리는 버튼인 것이다. 

이때 클릭을 해도 변화가 없는데 그 이유는 StatelessWidget 클래스를 상속받았기 때문이다.

 

즉, 화면에 변화가 없을 때는 StatelessWidget을

화면에 변화가 있을 때는 StatefullWidget을 사용한다.

 

import 'package:flutter/material.dart';

class Practice extends StatefulWidget {
  const Practice({super.key});

  @override
  State<Practice> createState() => _PracticeState();
}

class _PracticeState extends State<Practice> {
  var _checkbox = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(5.0),
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: [
              Row(
                children: [
                  Checkbox(
                      value: _checkbox,
                      onChanged: (value) {
                        setState(() {
                          _checkbox = value!;
                        });
                      }),
                  const Text(
                    'check box',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

statefulWidget을 적용하면 데이터 변동 시 화면을 바꿀 수 있다. 

화변을 바꾸기 위해서는 setState()함수를 사용해야 한다. 그렇지 않으면 화면 변화가 없다.

Widget Life Cycle 생명주기란?
시스템이 발생시키는 event에 의해 앱의 상태가 바뀌는 과정을 말한다.
즉, flutter 상태 관리는 라이프 사이클 관리를 말하는 것!

Stateless Widget 라이프 사이클

- Constructor 생성 후 build()함수를 호출해 UI 구성

- 단 한번의 build() 함수 실행

- 부모 위젯으로부터 전달받는 값이 변경되면 rebuild해서 새로운 위젯으로 대체한다. 즉 위젯의 변경이 일어나면 처음부터 Contructor와 build가 다시 실행되는 것이다.

 

Stateful Widget 라이프 사이클

- 자체 state를 가지고 있다.

- 상태 관리를 위해 build()함수를 여러번 실행하려면 Stateless가 아닌 Stateful Widget으로 기존의 위젯 방식과, build를 여러번 부를 수 있는 방식을 함께 사용해 2개의 클래스로 구성된다.

 

createState() : state 객체를 생성

initState() : Stateful Widget이 생성될때 딱 한번만 호출되는 함수

build() : UI 위젯을 랜더링 할때마다 호출

setState() : 변경된 데이터를 알려주고 UI도 변경될 수 있도록 한다.