StatefulWidget

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

  @override
  State<App> createState() => _AppState();
}

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

  void onClicked() {
    // setState를 사용해서 State에 데이터가 변경된 걸 알려줌
    // 그래야 화면이 update된다
    // setState -> State -> build 재호출 형식
    setState(() {
      counter += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDDB),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Click Count',
                style: TextStyle(
                  fontSize: 30,
                ),
              ),
              Text(
                '$counter',
                style: const TextStyle(
                  fontSize: 30,
                ),
              ),
              IconButton(
                iconSize: 40,
                onPressed: onClicked,
                icon: const Icon(
                  Icons.add_box_rounded,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

그렇다고 모든 상태 변화를 setState내부에 꼭 넣을 필요는 없음 (가독성을 위해 넣어서 사용)

- BuildContext context

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(
            color: Colors.red,
          ),
        ),
      ),
      home: const Scaffold(
        backgroundColor: Color(0xFFF4EDDB),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MyLargeTitle(),
            ],
          ),
        ),
      ),
    );
  }
}

//_AppState 에서 위젯 별도 분리

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

  @override
  Widget build(BuildContext context) {
    return Text(
      'My Large Title',
      style: TextStyle(
        fontSize: 30,
        color: Theme.of(context).textTheme.titleLarge?.color,
      ),
    );
  }
}

BuildContext의 context는 react의 useContext같은 것

모든 상위 요소들에 대한 정보를 담고 있음

Operator

!: Sure    /  ? : maybe 같은 의미

- Widget Lifecycle

@override
  void initState() {
    super.initState();
  }

1. initState는 단 한번만 호출, 무조건 build위에서 실행되어야한다.

주로 API 불러올 때 사용.

@override
  void dispose() {
    super.dispose();
  }

2. dispose

취소하는 메서드, 화면에서 사라질 때 사용한다.