Flutter StatefulWidget

가장 기본적인 상태관리를 하는 방법이다.

부모위젯

- StatefulWidget으로 생성한다.

- 모든 공유 상태를 가지고 있다.

- 상태 변경시 setState()로 자식 위젯들을 갱신한다.

 

자식 위젯

-  부모 위젯의 공유 상태를 전달받는다.

- 이벤트 발생시, 부모 위젯에게 전달하여 공유 상태를 변경한다.

 

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}
 
class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  // 공유 상태
  int state = 0;
 
  // 공유 상태 업데이트
  void increaseState() {
    setState(() {
      state += 1;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("state : $state"),
            Child(
              state: state, // 부모로부터 공유 상태를 전달 받는다.
              onPressed: increaseState, // 이벤트를 부모에게 전달한다.
            ),
          ],
        ),
      ),
    );
  }
}
 
class Child extends StatelessWidget {
  const Child({
    required this.state,
    required this.onPressed,
  });
 
  final int state;
  final void Function() onPressed;
 
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text("Child : $state"),
    );
  }
}