[flutter2.0] 1강~2강 | Stateful widget

✅ 조금 매운맛 강좌의 Stateful widget에 대해서 알아보자.

플러터를 프로젝를 처음 생성하면 만들어지는 파일을 기준으로 알아볼 예정

코드는 거의 변화가 없으나 맨 윗부분과 중간에 주석으로 된 부분을 보기

 

StatefulWidget에서 Stateful한 것들이 다시 작성되면 핫 리로드가 안되므로 다시 빌드해줘야한다.

-> 내 머릿속에 있는데, 설명하기가 구차나서,, 그냥 에러나면 리빌드 해보란 말!

 

✅ 코드 리뷰

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  // Stateful 연결하는 방법 스텝 1
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        /*onPressed: () {
          setState(() {
            _counter ++;
            print("$_counter");
          });
        },*/
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

1. 우선 MyApp을 StatefulWidget으로 만들어서 createState를 통해 return 하는 모습을 볼 수 있다.

2. 그리고 MyAppState는 State<MyApp>을 상속받는다.

=> 이 두 과정은 MyAppState에 그냥 statefulWidget을 해도 결과는 똑같다.