기술은 나의 도구

[노마드코더 플러터] StatefulWidget

StatefulWidget

  • 상태 (state) 를 갖고 있어 상태값이 변경될 때마다 UI 를 업데이트
  • State 클래스와 연결되어 있으며 데이터와 UI 를 관리하는 로직은 State 클래스 내에서 관리
  • BuildContext 에만 의존하는 경우 StatelessWidget 으로 구현

setState

  • 상태 변경
  • build 메소드 호출하여 UI 업데이트

initState

  • 한번만 호출된다.
  • build 메소드보다 먼저 호출된다.
  • 초기화 로직이 필요한 경우 수행할 수 있음 (초기값 설정, 데이터 로드 등)
  • UI 가 생성되지 않은 상태

dispose

  • widget 이 스크린에서 제거될 때 호출 (State 객체가 영구적으로 제거될 때)
  • 사용한 리소스 해제할 로직이 필요한 경우 수행

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

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

class _AppState extends State<App> {
  bool showTitle = true;

  void toggleTitle() {
    setState(() {
      showTitle = !showTitle;
    });
  }

  
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(
            color: Colors.red,
          ),
        ),
      ),
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDDB),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              showTitle ? const MyLargeTitle() : const Text('nothing'),
              IconButton(
                  onPressed: toggleTitle,
                  icon: const Icon(Icons.remove_red_eye))
            ],
          ),
        ),
      ),
    );
  }
}

class MyLargeTitle extends StatefulWidget {
  const MyLargeTitle({
    super.key,
  });

  
  State<MyLargeTitle> createState() => _MyLargeTitleState();
}

class _MyLargeTitleState extends State<MyLargeTitle> {
  
  void initState() {
    super.initState();
    print('initState');
  }

  
  void dispose() {
    super.dispose();
    print('dispose');
  }

  
  Widget build(BuildContext context) {
    print('build');
    return Text(
      'My Large Title',
      style: TextStyle(
        fontSize: 30,
        color: Theme.of(context).textTheme.titleLarge!.color,
      ),
    );
  }
}
  • #노마드코더
  • #플러터