Flutter - Consumer<T> class - Provider 패키지 더 쉽게 사용하기

 

Consumer Class

• provider 패키지의 일부
• provider와 함께 특정 데이터의 변경 사항을 수신하고 위젯 트리의 일부를 다시 빌드하는 데 사용
• Provider.of를 명시적으로 호출하지 않고도 제공자의 값을 확인하고 사용할 수 있는 위젯
• 전체를 빌드하지 않고 제공된 데이터에 따라 필요한 위젯만 선택적으로 리빌드하여 프로세스를 최적화
• 일반적으로 Consumer 위젯은 데이터의 변경 사항을 수신할 위젯트리 내에 하위 위젯으로 배치
• 제공된 데이터에 의존하는 위젯 하위 트리를 정의하는 빌더 함수 필요

Consumer<T>(
  builder: (context, value, child) {
    // provider의 값에 따라 달라지는 위젯 하위 트리
    // 값이 변경될 때 리빌드된 위젯 반환
  },
)

---

구문

• 플러터 공식 문서에서 제공하는 샘플 구문
• Consumer<Class> : 프로바이더 클래스 정의
• 하위 트리를 정의하는 빌더 정의
• 빌더에 들어가는 매개변수 : context, 프로바이더 변수명, child
  • 프로바이더 변수는 프로바이더 클래스를 객체화한 변수

// Consumer Sameple Code

/* Consumer */
@override
Widget build(BuildContext context) {
  return ChangeNotifierProvider(
    create: (_) => Foo(),
    child: Consumer<Foo>(
      builder: (_, foo, __) => Text(foo.value),
    },
  );
}

/* Provider Class */
class Foo extends ChangeNotifier {
  int _value = 0;
  int get value => _value;

  void updateNumber(val) {
    _value = val;
    notifyListeners();
  }
}

---

사용 예시

Preview

• 버튼을 누르면 '버튼 클릭'의 문자열로 업데이트되는 앱
• 앱 실행

 

• 버튼 클릭 시 '버튼 클릭'으로 업데이트

---

코드

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

void main() {
  runApp(
    // 변경 알림 프로바이더 정의
    ChangeNotifierProvider(
      // 기본 생성자를 사용하여 변경 알림 값 생성
      create: (_) => MyProvider(),
      child: const MaterialApp(
        home: ConsumerTestPage(),
      ),
    ),
  );
}

// 상태 변경을 위해 StatefulWidget 상속
class ConsumerTestPage extends StatefulWidget {
  const ConsumerTestPage({super.key});

  @override
  State<ConsumerTestPage> createState() => _ConsumerTestState();
}

class _ConsumerTestState extends State<ConsumerTestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 컨슈머 위젯 정의 : MyProvider 클래스를 객체화(provider변수)하여 빌드
        child: Consumer<MyProvider>(builder: (context, provider, child) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 버튼을 누르면 상태 업데이트
              Builder(builder: (context) {
                return ElevatedButton(
                    onPressed: () {
                      provider.updateNumber('버튼 클릭');
                    },
                    child: const Text('버튼'));
              }),
              // 변수의 값 출력
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(provider.value),
              ),
            ],
          );
        }),
      ),
    );
  }
}

// 프로바이더 클래스
class MyProvider extends ChangeNotifier {
  String _value = '초기값';
  String get value => _value;

  // 프로바이더 변수 업데이트 함수
  void updateNumber(val) {
    _value = val;
    notifyListeners();
  }
}

---

참고

flutter - provider package - documentation - provider - Consumer<T> class