🔖 หมวดบทเรียน: State Management ขั้นสูงสำหรับแอปที่ซับซ้อน

📌 เหมาะสำหรับ: ผู้ที่ต้องการทางเลือกใหม่ที่ปลอดภัยกว่าและมีประสิทธิภาพกว่า Provider

🎯 เป้าหมาย: เข้าใจการใช้ Riverpod v2 เพื่อจัดการสถานะในแอป Flutter

🧭 เกริ่นนำ

Riverpod คือ state management รุ่นใหม่ที่ถูกพัฒนาขึ้นโดยผู้สร้าง Provider โดยออกแบบให้ปลอดภัยกว่า, รองรับการทดสอบง่ายขึ้น, และไม่ขึ้นกับ widget tree เหมือน Provider ทำให้เหมาะกับโปรเจกต์ขนาดกลาง-ใหญ่

🧰 การติดตั้ง Riverpod

เพิ่มใน pubspec.yaml:

dependencies:
  flutter_riverpod: ^2.4.0

แล้วรัน:

flutter pub get

🔧 ตัวอย่างการใช้งาน Counter ด้วย Riverpod

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

// 1. สร้าง State Provider
final counterProvider = StateProvider<int>((ref) => 0);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CounterPage());
  }
}

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text("Riverpod Counter")),
      body: Center(child: Text('จำนวน: \$count', style: TextStyle(fontSize: 30))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}

🧩 ข้อดีของ Riverpod

• ไม่ผูกกับ widget tree → ทดสอบง่ายกว่า
• ป้องกันข้อผิดพลาดเรื่อง context
• สนับสนุนทั้ง StateProvider, FutureProvider, StreamProvider, Notifier, AsyncNotifier

✅ สรุป

• Riverpod คือทางเลือกใหม่ที่ปลอดภัยและยืดหยุ่นกว่าการใช้ Provider เดิม
• ใช้ ProviderScope เป็น root สำหรับ inject state
• ใช้ ConsumerWidget และ ref.watch() / ref.read() เข้าถึงและควบคุมค่า

ในบทถัดไป เราจะต่อด้วย BLoC (Business Logic Component) ซึ่งเหมาะกับการจัดการสถานะแบบ event-driven และโครงสร้างที่แยกชัดเจน