Flutter: StatefulWidget 살펴보기

Flutter: StatefulWidget 살펴보기

 

StatefulWidget에 대해서 간단히 정리

• Flutter 프로젝트를 처음 생성하면 기본 템플릿에 포함되어 있는 구조를 기준으로 설명
• 코드는 거의 동일하지만, 중요한 포인트는 Stateful과 관련된 연결 부분과 setState 사용법

 

 

핵심 포인트

1. StatefulWidget은 상태(State)를 가지는 위젯
2. 상태 변경 시 화면을 다시 그리려면 setState()를 사용
3. 핫 리로드로는 Stateful 부분이 제대로 반영되지 않을 수 있으므로, 변경 후 에러가 나면 리빌드 필요

 

샘플 코드

import 'package:flutter/material.dart';

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

// 1️⃣ StatefulWidget 생성
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

// 2️⃣ State<MyApp> 상속
class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 3️⃣ HomePage 역시 StatefulWidget
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

// 4️⃣ 실제 상태 관리
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++; // 상태 변경 시 setState로 화면 갱신
    });
  }

  @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: _incrementCounter, // 상태 변경 함수 호출
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

 

샘플 코드에 대한 정리

1. MyApp → StatefulWidget
   • createState()를 통해 MyAppState()를 반환
   • MyAppState에서 실제 UI를 정의
2. MyAppState → State 상속
   • State 클래스를 상속받아 상태를 관리
   • setState() 호출 시 UI 갱신
3. MyHomePage → StatefulWidget
   • 버튼 클릭 시 _counter 증가
   • _incrementCounter()에서 setState() 호출 → 화면 자동 갱신