Programming/Flutter

[Flutter] Provider로 상태관리

나쵸캣 2024. 4. 2. 09:53
반응형

Flutter Provider란 무엇인가요?

Flutter Provider는 상태 관리를 위한 라이브러리로서, 특히 Flutter 애플리케이션의 복잡한 상태 관리를 단순하게 만들어줍니다. 이 패키지를 사용하면 위젯 트리 전체에 걸쳐서 데이터를 전달할 필요 없이 필요한 곳에서 데이터에 접근할 수 있습니다.

 

Provider의 핵심 개념

  1. ChangeNotifier: Provider 패키지의 핵심 클래스 중 하나입니다. 이 클래스를 상속하면 상태 변경을 알릴 수 있습니다. 즉, 데이터가 변경될 때 UI를 업데이트할 수 있습니다.
  2. Provider: 데이터를 제공하는 클래스입니다. Provider를 사용하여 데이터를 생성하고, 필요한 위젯에서 데이터에 접근할 수 있습니다.
  3. Consumer: Provider 패키지에서 제공하는 위젯 중 하나로, 특정 데이터를 소비하고 해당 데이터가 변경될 때 자동으로 업데이트됩니다. 이를 통해 UI가 상태의 변경을 실시간으로 반영할 수 있습니다.
  4. Selector: 특정 데이터를 감시하고, 데이터가 변경될 때만 해당 위젯을 리빌드합니다. 이를 통해 불필요한 리빌드를 방지하고 성능을 최적화할 수 있습니다.

Flutter Provider 사용하기

1. Provider 패키지 추가: pubspec.yaml 파일에 Provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

 

2. ChangeNotifier 생성: 데이터 모델을 생성하고, ChangeNotifier 클래스를 상속합니다.

import 'package:flutter/material.dart';

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

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

 

 

3. Provider 제공: 데이터 모델을 위젯 트리의 상위에서 Provider로 제공합니다.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}
 

4. Consumer 또는 Selector로 데이터 사용: UI에서 데이터를 사용할 위치에서 Consumer 또는 Selector를 사용합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Provider Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Consumer<CounterModel>(
                builder: (context, counterModel, child) {
                  return Text(
                    '${counterModel.counter}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<CounterModel>(context, listen: false).increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

 

 

이렇게 하면 Flutter 애플리케이션에서 Provider를 사용하여 상태 관리를 할 수 있습니다. Provider 패키지는 매우 유연하고 강력하며, 대규모 애플리케이션의 상태 관리에도 효과적으로 사용할 수 있습니다.

반응형