[flutter] 플러터(Flutter)에서 데이터의 상태 변화를 감지하는 패키지는 무엇이 있나요?

04 Dec 2023

flutter

플러터(Flutter)에서 데이터의 상태 변화를 감지하는 패키지로는 provider과 GetX가 대표적입니다.

Provider: Provider는 상태 관리를 위한 패키지로, ChangeNotifier를 이용하여 데이터의 변화를 감지합니다. Provider를 사용하면 상위 위젯에서 하위 위젯까지 데이터를 전달할 수 있으며, 데이터의 변화에 따라 화면을 업데이트할 수 있습니다. Provider는 리액트(React)의 컨텍스트(Context) API와 비슷한 역할을 합니다.

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

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

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

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

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

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

GetX: GetX는 Flutter 애플리케이션 개발을 위한 전체 패키지로, 상태 관리, 라우팅, 의존성 관리 등을 포함하고 있습니다. GetX에서는 GetBuilder나 Obx와 같은 위젯을 사용하여 데이터의 변화를 감지하고, 화면을 업데이트할 수 있습니다.

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

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

class CounterController extends GetxController {
  int count = 0;

  void increment() {
    count++;
    update();
  }
}

class MyApp extends StatelessWidget {
  final CounterController _counterController = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter GetX Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Count:',
              ),
              Obx(
                () => Text(
                  '${_counterController.count}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => _counterController.increment(),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위의 두 예시는 간단한 카운터 앱을 구현한 것으로, 데이터의 상태 변화를 감지하고 그에 따라 숫자를 증가시키는 동작을 수행합니다. 사용자가 버튼을 누르면 데이터가 변경되고, 화면이 자동으로 업데이트됩니다.

이외에도 MobX, Riverpod 등 다양한 상태 관리 패키지가 있으니 프로젝트의 요구에 맞게 선택하여 사용할 수 있습니다.