Flutter State Basic

Flutter 기본 상태 관리

Flutter의 기본 상태 관리 방법은 간단하면서도 강력한 기능을 제공합니다. Flutter에서는 주로 setState, InheritedWidget, Provider 등이 기본 상태 관리 도구로 사용됩니다. 여기서는 각각의 방법에 대해 설명하고 예제를 통해 이해를 돕겠습니다.

1. setState를 사용한 상태 관리

setState는 Flutter에서 가장 기본적인 상태 관리 방법입니다. 위젯의 상태가 변경될 때 setState를 호출하여 화면을 다시 렌더링합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  void _decrement() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(child: Text('Count: $_count')),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: _increment,
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: _decrement,
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

2. InheritedWidget을 사용한 상태 관리

InheritedWidget은 상태를 하위 위젯 트리로 전파하는 데 사용됩니다. 이 방법은 여러 위젯이 동일한 상태를 공유해야 할 때 유용합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CounterProvider(
      child: MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

class CounterProvider extends InheritedWidget {
  final int count;
  final Function() increment;
  final Function() decrement;

  CounterProvider({Key? key, required Widget child})
      : count = 0,
        increment = () {},
        decrement = () {},
        super(key: key, child: child);

  static CounterProvider? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterProvider>();
  }

  @override
  bool updateShouldNotify(CounterProvider old) {
    return old.count != count;
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final provider = CounterProvider.of(context);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(child: Text('Count: ${provider?.count}')),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: provider?.increment,
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: provider?.decrement,
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

3. Provider를 사용한 상태 관리

Provider는 Flutter 커뮤니티에서 많이 사용하는 상태 관리 패키지입니다. Provider는 InheritedWidget을 기반으로 하며, 더 간단하고 강력한 상태 관리를 제공합니다.

설치

pubspec.yaml 파일에 provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

예제

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(child: Text('Count: ${counter.count}')),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: counter.increment,
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: counter.decrement,
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

결론

Flutter의 기본 상태 관리 방법에는 각기 장단점이 있습니다. setState는 간단하고 빠르게 사용할 수 있지만, 상태 관리가 복잡해질 때는 코드가 복잡해질 수 있습니다. InheritedWidget은 여러 위젯이 상태를 공유할 때 유용하지만, 구현이 다소 복잡할 수 있습니다. Provider는 강력하고 유연하며, 대규모 애플리케이션에서의 상태 관리를 쉽게 해줍니다. 애플리케이션의 규모와 요구 사항에 따라 적절한 상태 관리 방법을 선택하는 것이 중요합니다.