개발/Flutter

[Flutter] stateful widget

laladev 2024. 7. 23. 13:42

Stateful Widget

실행 중에 변하는 데이터(state)를 가지는 위젯이다.

state 를 가지기 때문에 state 의 초기화, 업데이트 등과 관련한 lifecycle 을 가진다.

 

 

flutter statefulwidget lifecycle

 

createState()

initState() => 위젯 초기화 시 호출됨

didChangeDependencies()

build() => 위젯 구성

didUpdateWidget()

setState() => state 의 값을 변경할 수 있음

deactivate()

dispose()

 

 

Code Template

import 'package:flutter/material.dart';

void main() {
  runApp(MyStateWidget(name: 'Name'));
}

class MyStateWidget extends StatefulWidget {
  const MyStateWidget({super.key, required this.name});
  final String? name;

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

class _MyStateWidgetState extends State<MyStateWidget> {
  int count = 0;

  @override
  void initState() {
    super.initState();
    count = 10;
  }

  void onClicked() {
    setState(() {
      count = count + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Widget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text("My AppBar"),
            actions: [
              IconButton(
                icon: Icon(Icons.person),
                onPressed: onClicked,
              ),
            ],
          ),
          body: Container(
            child: Text("Hello Widget: $widget.name: $count"),
          )),
    );
  }
}