Flutter State

Flutter widget의 생명 주기와 state에 대해 간략하게 설명한다.

Flutter를 사용하면 개발자가 신경쓰지 않도록 IDE가 굉장히 많은 걸 해 주기 때문에, 구조만 알고 있다면 어떤 것을 사용할 것인지 고르는 건 비교적 쉬운 것 같다.

Flutter에서 위젯의 상태에 관련된 걸 state라고 한다. 아래 두 가지만 알면 된다.

• Stateless 위젯은 생명 주기동안 state가 변하지 않는다.
• Stateful 위젯은 변할 수 있다.

즉 생명 주기동안 변화하는 부분은 stateful, 아닌 부분은 stateless이다.

setState

setState 메소드는 위젯의 새로고침이라고 보면 된다. stateless 위젯의 멤버 변수는 빌드가 된 후 화면에 보이는 값을 바꾸려고 시도해봤자 바꾼 값으로 빌드되지 않는다. 하지만 stateful은 생명 주기동안 state가 변화할 수 있으므로 이 때 setState 함수를 사용해 바꾼 값을 적용할 수 있다.

class StatefulApp extends StatefulWidget {
  @override
  State<StatefulApp> createState() => _AppState();
}

class _AppState extends State<StatefulApp> {
  int counter = 0;

  void onClick() => setState(() {
        counter = counter + 1;
      });

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(color: Colors.red),
        ),
      ),
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Clicked number : $counter'),
              IconButton(onPressed: onClick, icon: const Icon(Icons.plus_one)),
            ],
          ),
        ),
      ),
    );
  }
}

setState 함수는 실행되고 build 메소드를 다시 실행한다.

생명 주기

Stateful 위젯은 createState, initState, build, dispose와 같은 순서로 메소드를 실행하며 그 사이 setState로 state를 변화시킬 수 있다.

뭐 많지만 일단은 그냥 보면서 필요할 때 갖다가 써보자. 당연히 각 메소드들은 override해서 원하는 방식대로 사용할 수 있다.