Flutter - 4.0 State

드디어 StatefullWidget이 시작된다.
지금까지 했던 toonflix는 그냥 없애버리고...

버튼을 누르면 숫자가 올라가는 코드를 만들어 볼 것이다.

statefullWidget을 만들자.(자동으로 만들어 준다)
그러면 두 부분으로 나누어져 있는 것을 볼 수 있다.
위에 있는 짧은 부분은 '위젯 그 자체'이다.

class App extends StatefulWidget {

  const App({super.key});

  @override

  State<App> createState() => _AppState();

}

단순히 State를 불러와서 화면에 보여주는 역할만 한다.

두 번째 부분은...

class _AppState extends State<App> {

state이다. 위젯에 들어갈 데이터와 UI를 넣는 곳이다.

아래와 같이 counter 앱을 만들면...

import 'package:flutter/material.dart';

void main() {

  runApp(const App());

}

// 위젯 그 자체

class App extends StatefulWidget {

  const App({super.key});

  @override

  State<App> createState() => _AppState();

}

// state: 위젯에 들어갈 데이터와 UI를 넣는 곳

class _AppState extends State<App> {

  int counter = 0;

  void onClicked() {

    counter = 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),

              ),

            ],

          ),

        ),

      ),

    );

  }

}

작동을 안한다!
왜 그럴까?