플러터 Provider 사용법 및 예제: 상태 관리 하기

by

Flutter는 모바일, 웹, 데스크톱 앱 개발을 위한 구글의 UI 툴킷입니다. 플러터에서는 상태 관리가 중요한 개념 중 하나로, 앱의 성능과 유지 보수성에 큰 영향을 미칩니다. 그 중에서도 Provider는 상태 관리를 위한 패키지중 하나입니다. 플러터 provider을 이용하여 앱의 상태 관리를 어떻게 효과적으로 할 수 있는지 알아보겠습니다.

플러터 Provider란?

Provider는 Flutter 앱에서 상태 관리를 단순화시키는 데 도움을 주는 패키지입니다. 이는 앱의 여러 부분에서 쉽게 접근하고 수정할 수 있는 데이터를 제공합니다. 상태(state)란 앱이 작동하는 동안 변경될 수 있는 모든 데이터를 말합니다. 예를 들어, 사용자 인터페이스(UI)에서 보여지는 데이터, 사용자 설정, 앱의 내부 로직 등이 상태의 영역에 속합니다.

패키지 설치

Provider를 사용하기 위해서는 먼저 provider 패키지를 Flutter 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가하고, 프로젝트를 업데이트하세요.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

Provider 예제

Provider를 사용하는 기본적인 예로, 간단한 카운터 앱을 만들어 보겠습니다. 이 앱은 사용자가 버튼을 누를 때마다 숫자가 증가하거나 감소하는 기능을 가집니다. 먼저, 상태를 관리할 클래스를 정의합니다. 이 클래스는 ChangeNotifier를 확장(상속)하여, 상태 변경을 리스너에게 알릴 수 있습니다.

먼저, 상태를 관리할 클래스를 정의합니다. 이 클래스는 ChangeNotifier를 확장(상속)하여, 상태 변경을 리스너에게 알릴 수 있습니다.

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  // 카운트 값을 저장하기 위한 private 정수 변수입니다.
  int _count = 0;

  // _count 변수에 접근하기 위한 getter.
  // 이를 통해 다른 클래스가 카운트 값을 읽을 수 있지만 직접 수정할 수는 없습니다.
  int get count => _count;

  // 카운트를 1 증가시킨 후 notifyListeners를 호출하여 상태 변경을 알리고 이를 통해 새 데이터로 다시 빌드하도록 듣고 있는 위젯에 알립니다.
  void increment() {
    _count++;
    notifyListeners();
  }

  // 카운트를 1 감소시키고, increment와 마찬가지로 notifyListeners를 호출하여 상태 변경을 듣고 있는 위젯에 알립니다.
  void decrement() {
    _count--;
    notifyListeners();
  }
}

다음으로, 이 상태를 사용하는 UI를 구성합니다. ChangeNotifierProvider를 사용하여 상태를 제공하고, Consumer 위젯을 통해 상태를 사용합니다.

이 예제에서 ChangeNotifierProvider는 앱의 상단에서 Counter 클래스의 인스턴스를 생성하고, 이를 앱 전체에서 접근할 수 있게 합니다. Consumer 위젯은 Counter 클래스의 상태를 구독하고, 상태가 변경될 때마다 UI를 자동으로 업데이트합니다.

// main 함수는 앱의 시작점입니다. MyApp 위젯을 실행합니다.
void main() {
  runApp(MyApp());
}

// StatelessWidget을 상속받으므로, 상태가 없는 위젯임을 의미합니다.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ChangeNotifierProvider는 앱의 상태를 관리하는 Counter 객체를 제공합니다.
    // 이를 통해 앱의 모든 부분에서 Counter 객체에 접근할 수 있습니다.
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        home: CounterHomePage(),
      ),
    );
  }
}

// CounterHomePage 클래스는 카운터 애플리케이션의 홈 페이지를 정의합니다.
class CounterHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        // Consumer<Counter>는 Counter 객체의 변경사항을 듣고,
        // 변경사항이 있을 때마다 builder를 재실행하여 UI를 업데이트합니다.
        child: Consumer<Counter>(
          builder: (context, counter, child) => Text(
            'Counter: ${counter.count}',
            style: Theme.of(context).textTheme.headline4,
          ),
        ),
      ),
      // Row 위젯을 사용하여 버튼들을 가로로 배치합니다.
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end, // 버튼들을 화면 오른쪽 끝으로 정렬합니다.
        children: <Widget>[
          // 카운터 값을 감소시키는 버튼
          FloatingActionButton(
            onPressed: () {
              Provider.of<Counter>(context, listen: false).decrement();
            },
            child: Icon(Icons.remove), // 'remove' 아이콘 사용
            backgroundColor: Colors.red, // 버튼 배경색을 붉은색으로 설정
          ),
          SizedBox(width: 10), // 버튼 사이의 공간 추가
          // 카운터 값을 증가시키는 버튼
          FloatingActionButton(
            onPressed: () {
              Provider.of<Counter>(context, listen: false).increment();
            },
            child: Icon(Icons.add), // 'add' 아이콘 사용
          ),
        ],
      ),
    );
}

플러스 버튼을 누르면 숫자가 상승 마이너스 버튼을 누르면 숫자가 감소합니다.

플러터-provider-예제

마무리

Provider는 Flutter에서 상태 관리를 위한 도구입니다. 간단한 사용법으로 더 깔끔하고 유지 보수하기 쉬운 앱을 개발할 수 있습니다. 읽어주셔서 감사합니다.

StatefulWidget, StatelessWidget에 관한 글입니다. 참고부탁드립니다.

플러터 상태관리, StatefulWidget, StatelessWidget – 메모장 앱 만들기 (4) 

Leave a Comment