Widget, StatefulWidget, StatelessWidget

Widget

Flutter의 모든 것은 Widget으로 시작한다.

void main() {
  runApp(const MyApp());
}

main에서 runApp 함수를 실행하는 것으로 앱을 시작하고, MyApp은 Widget을 리턴하는 함수이다.

Widget은 StatelessWidget과 StatefulWidget으로 나뉜다. Widget은 Build 메서드를 포함하고, 해당 메서드를 이용해서 Layer Tree를 만든다.

state: 앱에서 사용되는 data

---

StatelessWidget

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

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

1. State가 없는 Widget. 변경될 data가 없는 Widget.
2. 해당 Widget을 build하기 위해 data가 주어질 수도 있다. 하지만 그렇게 주어진 data는 StatelessWidget 내부에서 변경되지 않는다.
3. build 메서드에서 생성한 Widget을 반환한다.

StatelessWidget을 바꾸기 위해서는, 상위 위젯에 StatefulWidget이 있어야 하고, StatefulWidget에서 StatelessWidget을 build할 때 넣는 인자값이 바뀌고, StatefulWidget에서 setState가 실행되어 값이 변경되었을 경우 StatelessWidget이 re-build 된다.

실제로 하나의 StatefulWidget 안에 많은 StatelessWidget들을 넣어 컨트롤하는 구조는 많이 쓰임.

---

StatefulWidget

State를 포함. setState가 발생할 때마다 re-build 된다.

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

  @override
  State<MyApp> createState() => _MyAppState();
}

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

StatefulWidget은 2개의 클래스로 구성되어 있다. state가 변경될 때 변경된 state를 반영해서 Widget을 다시 그리게 된다. 다시 그릴 때, 완전히 날려버리고 다시 그린다면 data도 같이 날라가기 때문에, data는 살려두고, 변경된 부분만 적용해야 한다. 이 때 data가 사라지지 않게 들고 있는 클래스가 필요하기 때문에 2개의 클래스로 구성된다.

StatefulWidget을 상속받은 MyApp에서 상태를 변경하는 것이 아니라, State을 상속받은 _MyAppState에서 상태를 변경한다. 따라서 변경 가능한 것들은 전부 State쪽에 선언하고, StatefulWidget을 상속받은 Widget에는 변경 가능하지 않은 상수들을 선언한다.

StatefulWidget을 상속받은 MyApp은 사실 변할 수 없는 객체이고, State 클래스를 통해서 변경하는 구조이다. StatefulWidget은 createState() 메서드에서 생성한 Widget을 반환한다. 그리고 build 메서드는 State 클래스에 존재한다.

---

출처

https://pks2974.medium.com/flutter-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-9532e16aff57
https://velog.io/@1984/Flutter-%EA%B8%B0%EB%B3%B8-%EC%98%88%EC%A0%9C-%EC%84%A4%EB%AA%85-%EB%B0%8F-%ED%95%B4%EC%84%A4
https://papabee.tistory.com/39