[flutter] 플러터 프로바이더를 통해 전역 상태를 관리할 수 있나요?

22 Dec 2023

flutter

아래는 Provider를 사용하여 전역 상태를 관리하는 간단한 예제입니다.

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

다음으로, 모델 클래스를 작성하고 해당 모델을 사용하여 전역으로 상태를 관리하는 Provider를 설정합니다.

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

class AppState with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Count:',),
              Consumer<AppState>(
                builder: (context, appState, child) =>
                    Text(
                      '${appState.count}',
                      style: Theme.of(context).textTheme.headline4,
                    ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<AppState>(context, listen: false).increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

이 예제에서는 Provider 패키지를 사용하여 AppState 모델을 만들고, ChangeNotifierProvider를 통해 앱 전역에서 이 모델을 공유합니다. 또한, Consumer 위젯을 사용하여 상태 변경을 구독하고 필요한 UI를 업데이트합니다.

이렇게하면 Provider를 사용하여 플러터 앱에서 전역 상태를 효과적으로 관리할 수 있습니다.

자세한 내용은 Provider 패키지 공식 문서를 참조하십시오.