flutter widget

플러터 관련 글들을 보다가 widget에 관한 글을 보게되어 정리해놓으려고 한다.

Q. 플러터에서 위젯은 무엇인가요?
A. 플러터에서 위젯은 사용자에게 보이는 인터페이스를 결정하는 부품이다. 위젯의 조합으로 다양한 UI를 보여줄 수 있다. 화면에 보이거나 보이지 않는 부분도 모두 위젯으로 이루어져 있기 때문에 굉장히 중요하다.

플러터 앱의 각 요소는 위젯이다. 화면에 보여지는 뷰는 앱을 만드는데 사용되는 위젯의 종류와 어떻게 위젯을 배치하는지 등에 따라 달라진다.

Q. 위젯의 타입에는 무엇이 있나요?
A. 위젯 타입은 대표적으로 두가지로 나뉜다.

• StatelessWidget : 상태를 저장하지않는 위젯. 상태가 없어 사용자의 이벤트 등으로 인해 바뀌는게 없기 때문에 화면 변화가 이루어지지 않는다. 정적인 화면을 보여줄 때 사용하는 위젯이다. ex) Icon , Text 등과 같은 위젯들이 대표적이다.
• StatefulWidget : 상태를 저장하는 위젯. 사용자의 이벤트나 데이터 변경을 모니터링하다가 UI를 업테이트 할 수 있다. 동적인 화면을 보여줄 때 사용한다. ex) CheckBox, Radio, Slider, TextField 등과 같은 위젯들이 대표적이다.

statelessWidget 기본 구조

class StatelessWidgetScreen extends StatelessWidget {
  const StatelessWidgetScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

statefulWidget 기본 구조

class StatefulWidgetScreen extends StatefulWidget {
  const StatefulWidgetScreen({Key? key}) : super(key: key);

  @override
  State<StatefulWidgetScreen> createState() => _StatefulWidgetScreenState();
}

class _StatefulWidgetScreenState extends State<StatefulWidgetScreen> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

기본구조는 이렇게 이루어져있다.