[Flutter] StatefulWidget & StatelessWidget

 

플러터 docs 읽기

 

https://docs.flutter.dev/development/ui/interactive#stateful-and-stateless-widgets

Adding interactivity to your Flutter app

Stateful and stateless widgets

A widget is either stateful or stateless. If a widget can change—when a user interacts with it, for example—it’s stateful.
A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

 

- statelessWidget의 경우, state가 없다는 뜻이 아닌 불변하는 state를 가진 위젯이다.

 

A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

 

- 변하는 state, user가 조작하여 바뀌는 state를 가지는 위젯이 statefulWidget이다.

 

A widget’s state is stored in a State object, separating the widget’s state from its appearance. The state consists of values that can change, like a slider’s current value or whether a checkbox is checked. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.

 

- statefulWidget에서는 state 변화를 유도할 때 setState를 호출한다. 리액트의 useState 훅처럼, 플러터에도 위젯을 재빌드하는 setState가 존재한다. 

 

---

https://docs.flutter.dev/development/ui/navigation

Using the Navigator

The Navigator widget displays screens as a stack using the correct transition animations for the target platform. To navigate to a new screen, access the Navigator through the route’s BuildContext and call imperative methods such as push() or pop():

 

위젯은 stack 방식으로 페이지를 이동한다. 스크린 이동을 위해 push, pop 같은 메서드를 사용해서 Navigator를 사용해서 움직인다.

content_copy

onPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),