Flutter Provider - 온더테크

Contents

Flutter에서 Provider는 상태 관리의 기본기를 쉽게 이해하고 사용할 수 있도록 도와주는 패키지입니다. Provider는 InheritedWidget을 기반으로 하며, 상태를 공유하고 하위 위젯 트리에 전파합니다. 이를 통해 상태 관리를 간단하고 효율적으로 할 수 있습니다.

주요 개념

ChangeNotifier: 상태 변화를 알리기 위해 사용되는 기본 클래스입니다. ChangeNotifier를 상속받아 상태를 관리할 클래스를 정의합니다.
Provider: 상태를 공급하는 역할을 하며, ChangeNotifierProvider와 Consumer 등의 위젯을 통해 상태를 전달하고 소비합니다.
Consumer: 상태 변화를 구독하고, 상태가 변경될 때마다 UI를 업데이트합니다.

기본 사용 예제

1. ChangeNotifier 정의

먼저, 상태를 관리할 ChangeNotifier 클래스를 정의합니다. 여기서는 간단한 카운터 예제를 사용합니다.

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

2. ChangeNotifierProvider 설정

ChangeNotifierProvider를 사용하여 상태를 공급합니다. 일반적으로 main.dart 파일에서 설정합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart'; // ChangeNotifier 정의한 파일을 가져옵니다

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Provider Example',
      home: CounterPage(),
    );
  }
}

3. Consumer를 사용하여 상태 읽기

Consumer 위젯을 사용하여 상태를 읽고 UI를 업데이트합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart'; // ChangeNotifier 정의한 파일을 가져옵니다

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Consumer<Counter>(
          builder: (context, counter, child) {
            return Text(
              'Counter: ${counter.count}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<Counter>().increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

설명

ChangeNotifier 정의: Counter 클래스는 ChangeNotifier를 상속받아 상태를 관리합니다. increment 메서드는 _count를 증가시키고 notifyListeners를 호출하여 상태 변화를 알립니다.
ChangeNotifierProvider 설정: ChangeNotifierProvider는 Counter 인스턴스를 공급하고, 하위 위젯 트리에서 이를 사용할 수 있게 합니다.
Consumer를 사용하여 상태 읽기: Consumer 위젯은 Counter를 구독하고, 상태가 변경될 때마다 builder 메서드를 호출하여 UI를 업데이트합니다.

추가 기능

MultiProvider: 여러 개의 Provider를 동시에 사용할 때 유용합니다.

  MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => Counter()),
      // 다른 Provider 추가 가능
    ],
    child: MyApp(),
  );

Provider.of: Consumer 대신 직접 상태를 읽을 때 사용합니다.

  final counter = Provider.of<Counter>(context);

Selector: 특정 부분의 상태만 구독하고 변경될 때만 UI를 업데이트합니다.

  Selector<Counter, int>(
    selector: (context, counter) => counter.count,
    builder: (context, count, child) {
      return Text(
        'Counter: $count',
        style: TextStyle(fontSize: 24),
      );
    },
  );

결론

Provider는 Flutter 애플리케이션에서 상태 관리를 쉽게 할 수 있도록 도와주는 강력한 도구입니다. ChangeNotifier와 함께 사용하면, 간단한 코드로 상태를 관리하고, UI와 상태를 효과적으로 동기화할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

Post Views: 275