Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 1: การจัดการ State ด้วย Provider

🔖 หมวดบทเรียน: การจัดการ 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 เดิม