Flutter의 Provider 패턴 사용법

Flutter에서 상태 관리는 애플리케이션 개발의 핵심 요소 중 하나입니다. 다양한 상태 관리 패턴 중 Provider 패턴은 Flutter 커뮤니티에서 널리 사용되는 강력하고 유연한 상태 관리 솔루션입니다. Provider 패턴은 상태를 효율적으로 관리하고, 재사용 가능하게 하며, 간단하게 구조화할 수 있도록 도와줍니다. 이번 글에서는 Flutter에서 Provider 패턴을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Provider 패턴의 기본 개념

Provider 패턴은 상태를 중앙에서 관리하고 이를 필요로 하는 위젯에 효율적으로 공급하는 방식입니다. 이를 통해 상태의 일관성을 유지하고, 상태 변경 시 필요한 부분만 업데이트할 수 있습니다. Flutter의 Provider 패키지를 사용하면 이 패턴을 쉽게 구현할 수 있습니다.

2. Provider 패키지 설치

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

 

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. ChangeNotifier와 ChangeNotifierProvider

ChangeNotifier는 상태를 관리하고 변경 사항을 알리기 위해 사용하는 클래스입니다. ChangeNotifierProvider는 ChangeNotifier를 위젯 트리에 공급합니다.

 

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

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

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

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

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

    return Scaffold(
      appBar: AppBar(title: Text('Provider Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

 

위 코드는 기본적인 Provider 패턴을 사용한 카운터 애플리케이션입니다. Counter 클래스는 상태와 상태 변경 메서드를 정의하고, ChangeNotifierProvider는 Counter 인스턴스를 공급합니다. Provider.of<Counter>(context)를 사용하여 위젯에서 상태를 접근하고 업데이트할 수 있습니다.

 

반응형

 

4. Consumer를 사용한 상태 접근

Consumer 위젯을 사용하면 Provider.of를 직접 호출하지 않고도 상태를 구독하고, 상태 변경 시 UI를 업데이트할 수 있습니다.

 

 

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

 

 

위 코드는 Consumer 위젯을 사용하여 상태를 접근하고 UI를 업데이트하는 예제입니다. Consumer는 상태가 변경될 때마다 builder를 호출하여 UI를 업데이트합니다.

5. MultiProvider를 사용한 다중 상태 관리

여러 개의 Provider를 사용하여 다양한 상태를 관리할 수 있습니다. MultiProvider를 사용하면 여러 Provider를 한 번에 제공할 수 있습니다.

 

 

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Counter()),
        ChangeNotifierProvider(create: (context) => AnotherModel()),
      ],
      child: MyApp(),
    ),
  );
}

class AnotherModel extends ChangeNotifier {
  String _value = "Hello";

  String get value => _value;

  void changeValue(String newValue) {
    _value = newValue;
    notifyListeners();
  }
}

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

    return Scaffold(
      appBar: AppBar(title: Text('MultiProvider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            Text('Another model value: ${anotherModel.value}'),
            ElevatedButton(
              onPressed: () {
                anotherModel.changeValue('New Value');
              },
              child: Text('Change Value'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}​

 

 

위 코드는 MultiProvider를 사용하여 Counter와 AnotherModel 두 개의 상태를 관리하는 예제입니다. 여러 Provider를 한 번에 공급하고, 각각의 상태를 위젯에서 접근하고 업데이트할 수 있습니다.

6. Selector를 사용한 성능 최적화

Selector는 Consumer와 비슷하지만, 상태의 특정 부분만 구독하여 성능을 최적화할 수 있습니다.

 

 

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

 

위 코드는 Selector를 사용하여 Counter의 count 상태만 구독하고, 변경될 때만 UI를 업데이트합니다. 이를 통해 불필요한 재빌드를 줄일 수 있습니다.

결론

Provider 패턴은 Flutter 애플리케이션에서 상태를 효율적으로 관리하고, 재사용 가능하게 하며, 간단하게 구조화할 수 있는 강력한 도구입니다. 기본적인 ChangeNotifier와 ChangeNotifierProvider 사용법부터 Consumer, MultiProvider, Selector 등을 활용한 다양한 상태 관리 방법을 살펴보았습니다. Provider 패턴을 적절히 활용하여 유지 보수성과 확장성이 뛰어난 애플리케이션을 만들어보세요.