[flutter] 플러터 프로바이더를 사용하여 데이터의 변경 감지하기

22 Dec 2023

flutter

프로바이더 소개
플러터에서 프로바이더 사용하기
데이터 변경 감지하기
예제 코드
마무리

프로바이더 소개

플러터 앱 개발 시 상태 관리는 매우 중요합니다. 이를 위해 플러터에서는 프로바이더(Provider) 패키지를 사용할 수 있습니다. 프로바이더는 변화하는 데이터를 앱 전반에 걸쳐 제공하고, 이 데이터의 변경을 감지하여 화면을 다시 그리는데 유용합니다.

플러터에서 프로바이더 사용하기

플러터 프로바이더를 사용하기 위해서는 프로바이더 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  provider: ^X.X.X

X.X.X는 원하는 프로바이더 패키지의 버전을 지정하는 곳입니다. 이후 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

데이터 변경 감지하기

프로바이더를 사용하면 데이터의 변경을 감지할 수 있습니다. 예를 들어, 모델 클래스의 필드 값이 변경될 때마다 화면이 자동으로 업데이트되도록 할 수 있습니다.

예제 코드

다음은 간단한 카운터 앱의 예제 코드입니다. ChangeNotifier 클래스를 상속받아 데이터의 변경을 감지하고, Provider.of를 사용하여 필요한 데이터를 화면에 제공합니다.

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

class Counter with ChangeNotifier {
  int _count = 0;
  
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('플러터 프로바이더 예제'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '버튼을 누르면 카운트가 증가합니다:',
              ),
              Text(
                '${counter.count}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => counter.increment(),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

마무리

이제 프로바이더를 사용하여 데이터의 변경을 감지하고, 앱의 상태를 관리하는 방법에 대해 알아보았습니다. 프로바이더를 효과적으로 활용하여 플러터 앱의 상태를 관리할 수 있습니다.