🔖 หมวดบทเรียน: การจัดการ State ในแอประดับแอดวานซ์
📌 เหมาะสำหรับ: ผู้พัฒนาแอปที่ต้องการแยก Logic ออกจาก UI อย่างมีประสิทธิภาพ
🎯 เป้าหมาย: เข้าใจการใช้ Provider package เพื่อจัดการสถานะ (State) ใน Flutter
🧭 เกริ่นนำ
การจัดการ State เป็นหัวใจสำคัญของการพัฒนาแอปพลิเคชัน Flutter เมื่อแอปเติบโตขึ้น การใช้ setState()
อย่างเดียวอาจไม่เพียงพอและทำให้โค้ดยากต่อการดูแลรักษา บทนี้จะแนะนำ provider
ซึ่งเป็นหนึ่งใน state management ที่นิยม ใช้งานง่ายและเป็นทางการที่แนะนำโดยทีม Flutter เอง
🧰 การติดตั้ง Provider
เพิ่ม dependency ใน pubspec.yaml
dependencies:
provider: ^6.1.0
แล้วรันคำสั่ง:
flutter pub get
📦 สร้าง State Model
import 'package:flutter/material.dart';
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
🧪 ตัวอย่างแอปแบบใช้ Provider
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final counter = Provider.of<Counter>(context);
return Scaffold(
appBar: AppBar(title: Text("Provider Counter")),
body: Center(
child: Text('จำนวน: \${counter.count}', style: TextStyle(fontSize: 30)),
),
floatingActionButton: FloatingActionButton(
onPressed: () => counter.increment(),
child: Icon(Icons.add),
),
);
}
}
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
✅ สรุป
provider
เป็น State Management ที่ง่ายและเป็นที่นิยม- ใช้
ChangeNotifier
สำหรับสร้าง model ที่สามารถแจ้งเตือนได้ - ใช้
ChangeNotifierProvider
ในการ inject state เข้าสู่ widget tree
ในบทถัดไป เราจะเรียนรู้ Riverpod ซึ่งเป็น state management แบบใหม่ที่ปลอดภัยและปรับปรุงจาก Provider เดิม