ติดตั้ง miniriverpod ได้ในไม่กี่นาที
ตั้งค่าข้อจำกัดของ SDK, เพิ่มแพ็กเกจ และยืนยันว่า ProviderScope + WidgetRef.watch เชื่อมต่อถูกต้อง
ข้อกำหนด
ใช้ข้อจำกัดเดียวกับแพ็กเกจเพื่อหลีกเลี่ยงความไม่ตรงกันระหว่าง analyzer และ runtime
Dart SDK
>=3.10.0 <4.0.0
Flutter
เคล็ดลับ
หากแอปของคุณถูกปักเวอร์ชันต่ำกว่า Dart 3.10 ให้เพิ่มข้อจำกัดของ SDK ก่อน จากนั้นรัน flutter pub get
การติดตั้ง
ติดตั้งผ่าน CLI เป็นหลัก แล้วคงเวอร์ชันให้สอดคล้องกับ changelog ของแพ็กเกจ
CLI
pubspec.yaml
# เพิ่มลงใน dependencies
dependencies:
miniriverpod: ^0.0.2
ขั้นตอนแรก
ห่อแอปของคุณด้วย ProviderScope, กำหนด Provider และแสดงผล state จาก ConsumerWidget
// 1) ครอบแอปของคุณด้วย ProviderScope
void main() {
runApp(const ProviderScope(child: MyApp()));
}
// 2) กำหนด Provider
final counterProvider = Provider<int>((ref) => 0);
// 3) เฝ้าดูจาก UI
class MyApp extends ConsumerWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Directionality(
textDirection: TextDirection.ltr,
child: Center(child: Text('$count')),
);
}
}
ใช้ Provider((ref) => ...) สำหรับค่าที่เป็น synchronous
ใช้ AsyncProvider<T>((ref) async => ...) สำหรับ Future และใช้ ref.emit(stream) สำหรับ Stream
สลับไปใช้ ref.invoke(provider.method()) เมื่อคุณนำ mutations ไปใช้
ขั้นตอนถัดไป
แนวคิดหลัก
ทำความเข้าใจตัวตนของ provider ที่อิงกับ args, การฉีด Scope และตัวเลือกการออกแบบแบบไม่ใช้ codegen
เปิดแนวคิดหลักProvider และการอ่าน
เรียนรู้พฤติกรรม watch/read/listen และรูปแบบการ refresh ของ AsyncProvider
เปิด Providersเอกสารอ้างอิง API
ค้นหาวิธีต่าง ๆ เช่น invalidate, refreshValue, keepAlive และ invoke ได้อย่างรวดเร็ว
เปิดเอกสารอ้างอิง API