[flutter] 플러터 프로바이더를 사용한 앱 전역 상태 관리

14 Dec 2023

flutter

플러터 앱을 개발하다 보면 상태 관리가 중요한 이슈 중 하나입니다. 플러터에서는 프로바이더(Provider) 라이브러리를 사용하여 앱의 전역 상태를 효과적으로 관리할 수 있습니다. 이번 글에서는 프로바이더를 사용하여 플러터 앱의 전역 상태를 관리하는 방법에 대해 알아보겠습니다.

프로바이더란?

플러터의 프로바이더는 앱의 상태 관리를 단순화하고, 더 깔끔한 코드를 작성할 수 있도록 도와주는 패키지입니다. 이를 통해 상태를 관리하고 필요한 위젯들에게 데이터를 제공할 수 있습니다.

프로바이더 사용하기

먼저, pubspec.yaml 파일에 아래와 같이 프로바이더 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

다음으로, main.dart 파일에서 프로바이더 패키지를 임포트합니다.

import 'package:provider/provider.dart';

모델 클래스 생성

앱 전역에서 사용할 데이터 모델 클래스를 생성합니다.

class AppStateModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

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

프로바이더 제공

이제 위에서 생성한 AppStateModel을 프로바이더를 통해 앱 전역에서 사용할 수 있도록 제공합니다.

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

상태 사용

이제 상태를 사용할 위젯에서 Provider.of 메서드를 사용하여 데이터에 접근할 수 있습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppStateModel>(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '횟수:',
            ),
            Text(
              '${appState.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => appState.incrementCounter(),
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

결론

프로바이더를 사용하면 앱 전역에서 상태를 효과적으로 관리할 수 있으며, 위젯들 간의 데이터 공유가 간편해집니다. 프로바이더를 통해 앱의 상태를 관리하는 방법에 대해 알아보았는데, 다음에는 프로바이더를 조금 더 복잡한 앱 상태에 적용하는 방법에 대해 알아보겠습니다.

참고문헌: 플러터 공식 문서 - Provider