การผสาน Flutter พร้อมการเป็นเจ้าของ container ที่ระบุชัดเจน.

ProviderScope สามารถเป็นเจ้าของ container เองหรือรับมาจากภายนอกได้. API ของ Consumer ทำให้การเข้าถึง WidgetRef ยังคงเข้ากันได้กับโค้ดสไตล์ Riverpod.

เปิดการทดสอบ อ่านมิวเทชัน

การเป็นเจ้าของ ProviderScope

การเป็นเจ้าของ container มีผลต่อความรับผิดชอบในการ dispose.

container ภายใน

ProviderScope(child: ...) dispose อัตโนมัติ

container ภายนอก

ProviderScope(container: c, ...) ต้องให้ผู้เรียกเรียก c.dispose()

scope ที่ไม่ถูกควบคุม

UncontrolledProviderScope จะไม่ dispose container

ข้อผิดพลาดที่พบบ่อย

ในการทดสอบ widget ให้จำไว้ว่าต้อง dispose ProviderContainer ที่ถูก inject จากภายนอก เพื่อหลีกเลี่ยง timer leak ที่ยังค้างอยู่.

รูปแบบของ Consumer

ทุกตัวเลือกจะเปิดเผย WidgetRef; เลือกตามสไตล์ของ widget และความต้องการของสถานะภายใน.

รากของแอป

ควรใช้เมื่อใด

Consumer: บล็อก builder ภายในสำหรับพื้นที่ reactive ขนาดเล็ก.
ConsumerWidget: widget แบบ stateless พร้อม build(context, ref).
ConsumerStatefulWidget: widget แบบ stateful พร้อม ref อยู่ภายใน ConsumerState.

ตัวอย่าง: ConsumerStatefulWidget

ใช้ ConsumerState เมื่อคุณต้องการทั้ง WidgetRef และสถานะ UI แบบเปลี่ยนแปลงได้ภายในเครื่อง.

class HomePage extends ConsumerStatefulWidget {
  const HomePage({super.key});

  @override
  ConsumerState<HomePage> createState() => _HomePageState();
}

class _HomePageState extends ConsumerState<HomePage> {
  bool expanded = false;

  @override
  Widget build(BuildContext context) {
    final user = ref.watch(currentUser);
    return Column(
      children: [
        Text('$user'),
        Switch(
          value: expanded,
          onChanged: (v) => setState(() => expanded = v),
        ),
      ],
    );
  }
}
ภายในของ Consumer จะเลื่อนการ rebuild ไปหลังเฟรม ช่วยลดปัญหา setState ระหว่าง build.
ใช้ WidgetRef.watch เฉพาะกับค่าที่ควรกระตุ้นการ rebuild เท่านั้น.
เก็บ side effect ไว้นอก build; ใช้ callback และเมธอด invoke/refresh แทน.

ขั้นตอนถัดไป

การทดสอบ

ตรวจสอบวงจรชีวิตของ container, override และการอัปเดตแบบ async ในการทดสอบ unit และ widget.

เปิดการทดสอบ

ข้อมูลอ้างอิง API

ดู signature ของ ProviderScope, WidgetRef และเมธอดของ container.

เปิดข้อมูลอ้างอิง API