ทำความรู้จักและใช้งาน Riverpod ใน Flutter เบื้องต้น ตอนที่ 1

flutter_riverpod: ^2.5.1

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// ตัวอย่างการกำหนด
final greetingProvider = Provider<String>((ref) {
  return 'Hello, Riverpod!';
});

// ตัวอย่างการกำหนด
final counterProvider = StateProvider<int>((ref) => 0);

// ตัวอย่างการกำหนด
class CounterNotifier extends Notifier<int> {
  @override
  int build() => 0;

  void increment() => state++;
}

final counterProvider = NotifierProvider<CounterNotifier, int>(() => 
CounterNotifier());

// ตัวอย่างการกำหนด
class CounterStateNotifier extends StateNotifier<int> {
  CounterStateNotifier() : super(0);

  void increment() => state++;
}

final counterProvider = StateNotifierProvider<CounterStateNotifier, int>(() =>
CounterStateNotifier());

// ตัวอย่างการกำหนด
final userNameProvider = FutureProvider<String>((ref) async {
  // จำลองการดึงข้อมูลจาก API
  await Future.delayed(Duration(seconds: 2));
  return 'John Doe';
});

// ตัวอย่างการกำหนด
final counterStreamProvider = StreamProvider<int>((ref) async* {
  // จำลองการนับเลข
  int counter = 0;
  while (true) {
    await Future.delayed(Duration(seconds: 1));
    yield counter++;
  }
});

final name = SomeProvider.someModifier<Result>((ref) {
  <your logic here>
});

import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateProvider<int>((ref) => 0);

// รูปแบบเต็มแบบกำหนดปีกกาฟังก์ชั่น
final counterProvider = StateProvider<int>((ref) {
  return 0;
});

// เฉพาะบางส่วน
class Home extends StatefulWidget {
  static const routeName = '/home';

  const Home({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
......
....

class Home extends ConsumerStatefulWidget {
  static const routeName = '/home';

  const Home({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends ConsumerState<Home> {

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {

class Home extends ConsumerWidget {
  const Home({super.key});

  @override
  // Notice how "build" now receives an extra parameter: "ref"
  Widget build(BuildContext context, WidgetRef ref) {

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers/counter_provider.dart'; // Import the provider

class Home extends ConsumerStatefulWidget {
  static const routeName = '/home';

  const Home({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends ConsumerState<Home> {
  @override
  Widget build(BuildContext context) {
    final counter = ref.watch(counterProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text('$counter')
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {     
          // Increment the counter value
          ref.read(counterProvider.notifier).state++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

final counter = ref.watch(counterProvider);

ref.read(counterProvider.notifier).state++;

BuildContext.watch -> WidgetRef.watch
BuildContext.read -> WidgetRef.read
BuildContext.select -> WidgetRef.watch(myProvider.select)

ใช้ "watch" ภายในเมธอด build เพื่อให้วิดเจ็ตสามารถตรวจจับการเปลี่ยนแปลงของ provider 
และ rebuild เมื่อมีการเปลี่ยนแปลง
ใช้ "read" ภายในคลิกแฮนด์เลอร์และอีเวนต์อื่น ๆ เพื่ออ่านค่าจาก provider โดยไม่ rebuild วิดเจ็ต
ใช้ "select" เมื่อจำเป็นต้องกรองค่าหรือควบคุมการ rebuild ของวิดเจ็ตตามเงื่อนไขที่กำหนด

class _HomeState extends ConsumerState<Home> {    
  @override
  Widget build(BuildContext context) {
    // Listen to the counterProvider without rebuilding the widget
    ref.listen<int>(counterProvider, (previous, next) {
      print('debug: Counter changed from $previous to $next');
    });   	  
    print("debug: build");
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer(builder: (context, ref, child) {
              final counter = ref.watch(counterProvider);
              print("debug: build only here");
              return Text('$counter');
            })
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Increment the counter value
          ref.read(counterProvider.notifier).state++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}