[flutter] 플러터 프로바이더 설정 방법

14 Dec 2023

flutter

플러터 앱에서 상태를 전역적으로 관리하고 공유하려면 플러터 프로바이더를 설정해야 합니다. 이 기능을 사용하면 여러 위젯에서 데이터에 쉽게 접근할 수 있습니다. 아래는 간단한 예제를 통해 플러터 프로바이더를 설정하는 방법을 안내합니다.

단계 1: 의존성 추가

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.2

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

단계 2: 프로바이더 생성

다음으로, ChangeNotifier 클래스를 상속한 클래스를 만들어서 전역 상태를 관리합니다.

import 'package:flutter/foundation.dart';

class CounterProvider with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

단계 3: 메인 앱에서 프로바이더 사용

이제, 메인 앱에서 프로바이더를 만들어 전역으로 사용할 수 있습니다.

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

단계 4: 위젯에서 상태 사용

이제 위젯에서 전역 상태를 사용할 수 있습니다.

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

    return Scaffold(
      appBar: AppBar(
        title: Text('플러터 프로바이더 예제'),
      ),
      body: Center(
        child: Text(
          '카운트: ${counter.count}',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

이제 프로바이더를 설정하고 상태를 전역에서 관리할 수 있는 간단한 예제를 만들었습니다. 프로바이더는 플러터 앱을 개발할 때 상태 관리에 유용한 도구입니다.

참고 문헌:

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple#changenotifier
https://pub.dev/packages/provider