Flutter Log | Widget 정리

사용해 보거나 앞으로 사용하기 위한 위젯들을 정리하는 페이지입니다.

📢 플러터를 공부하며 정리하는 강의노트입니다. 기억을 위한 요점 및 키워드 기록에 중점을 둔 글입니다. 틀린 내용, 질문 등 어떤 코멘트도 환영입니다.

플러터 위젯

Flutter Widget

Button

ElevatedButton(onPressed: onPressed, child: child)

- 백그라운드 색이 있는 버튼

OutlinedButton(onPressed: onPressed, child: child)

- 백그라운드 색 없이 외곽선만 있는 버튼

TextButton(onPressed: onPressed, child: child)

- 링크와 같은 텍스트 형태의 버튼

TextButton(
	onPressed: clickHandler,
    style: TextButton.styleForm(
    	padding: const EdgeInsets.only(top: 20,),
    	foregroundColor: Colors.white,
    	textStyle: const TextStyle(
        	fontSize: 28,
            ),
        ),
    child: const Text('Button"),
)

SizedBox

위젯 사이 간격을 조절할 때 사용할 수 있다.

SizedBox(
	height: 80,
),

StatelessWidget & StatefulWidget

정적인 위젯을 정의할 때는 StatelessWidget을 상속받아서 만들었다. 반대로 동적인 위젯을 정의할 때는 다른 클래스를 상속받아야 하는데, 그것이 StatefulWidget이다.

상태라는 것이 변화가 있는 것을 표현할 때 사용한다. 늘 그대로 있는 것에 대한 상태는 말하지 않는 것이 당연하다. 이런 관점에서, 소프트웨어에서의 상태가 변한다는 것은 값이 변하는 것을 말할 수 있고, 상태를 갖는 다는 것은 변하는 값을 포함한다는 말이 된다. 따라서 StatefulWidget을 상속하는 객체(위젯) 내의 변수들은 값이 동적으로 변할 수 있다.

extends StatelessWidget	extends StatefulWidget
@override Widget build(){ }	@override State<WidgetName> createState(){     return  }

Life Cycle

위젯은 각자의 라이프 사이클(생명주기)를 갖고 있다.

3가지 주요 생명주기 관리 메서드

initState()	StatefulWidget의 State 객체가 초기화 될 때 플러터에 의해서 실행된다.
build()	Widget이 처음 생성되거나 setState()가 호출 된 이후마다 플러터에 의해서 실행된다.
dispose()	Widget이 삭제되기 전에 플러터에 의해서 실행된다.