[Flutter] Provider

들어가며

Provider란?

• 위젯간의 상태를 공유하고 전달하고 사용하기 쉽게 해주는 것을 말한다.
• 글로벌하게 상태를 사용하고싶을 때 사용한다.

예제

pubspec.yaml

dependencies:
  provider: ^5.0.0

main.dart

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(); // 상태 변경을 Provider에 알림
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider Example'),
        ),
        body: Column(
          children: [
            CounterView(),
            CounterController(),
          ],
        ),
      ),
    );
  }
}

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Provider로부터 상태를 가져와서 사용
      child: Consumer<Counter>(
        builder: (context, counter, _) {
          return Text('${counter.count}');
        },
      ),
    );
  }
}

class CounterController extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextButton(
        child: Text("increase"),
        onPressed: () {
          // Provider로 상태 변경 요청
          Provider.of<Counter>(context, listen: false).increment();
        },
      ),
    );
  }
}