Flutter #4 | Stateful Widget (State, setState)

__작성자 : 박연우(@HyeonWooGa)

Stateful Widget !

State 가 전부인 리액트와는 다르게 Flutter 에서는 State 보다 좋은 위젯들을 더 많이 사용하게 될 예정

개념

Stateful means there is State, that is going change.

• Stateless Widget was really simple Widget, just for drawing Display.
• but Stateful Widget is more complex Widget, it reflects changing_data(State) on Display in real-time.

구현

That's Two Way to use Stateful Widget.

1. Use AutoComplete for Stateful Widget
2. Use Stateful Widget covert from Statelsee Widget
   • Using Code Action Convert to StatefulWidget

setState

앱의 빌드 코드를 변화된 데이터와 함께 다시 불러온다.

• 코드를 안에 쓰던지 밖에 쓰던지는 크게 상관 없지만 코드를 안에 쓰는 것이 일반적이다.

동작 예시

• 코드

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  void onClicked() {
  	// if we don't have setState, It's not reflected on UI in real-time
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDDB),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Click Count',
                style: TextStyle(fontSize: 30),
              ),
              Text(
                '$counter',
                style: const TextStyle(fontSize: 30),
              ),
              IconButton(
                onPressed: onClicked,
                icon: const Icon(
                  Icons.add_box_rounded,
                ),
                iconSize: 40,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

개인의견

• 리액트에서 다뤘던 State 에 비해 당장은 훨씬 간단한 개념으로 느껴진다.
• 추후 스크린(페이지)이/가 많아지고 페이지단위가 아닌 통합 데이터 관리가 필요할땐 어떻게 관리될지 상상이 어느정도는 되지만 어떻게 관리할지 궁금하다.

학습 중에 작성된 내용이므로 틀리거나 부족한 내용이 있을 수 있습니다.