การใช้งาน Provider จัดการข้อมูล App State ใน Flutter

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
..........
}

dependencies:
  flutter:
    sdk: flutter

  provider: ^6.0.1

import 'package:provider/provider.dart';

import 'package:flutter/material.dart';

// สร้างข้อมูล app state ชื่อ Counter ใช้งานร่วมกับ ChangeNotifier
class Counter with ChangeNotifier {
  int _count = 0; // กำหนดชนิดข้อมูล และค่าเริ่มต้น

  // กำหนด getter คือค่าจากตัวแปร _count
  int get count => _count;

  // กำหนดคำสั่ง และการทำงาน
  void increment() {
    _count++; // เพิ่มจำนวน
    notifyListeners(); // แจ้งเตือนการเปลี่ยนแปลงข้อมูล
  }

  // กำหนดคำสั่ง และการทำงาน
  void reset() {
    _count = 0; // รีเซ็ตค่า
    notifyListeners(); // แจ้งเตือนการเปลี่ยนแปลงข้อมูล
  }  

}

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

import './screen/launcher.dart';

import 'models/counter_model.dart';


void main() {  runApp(const MyApp());}
 
// ส่วนของ Stateless widget
class MyApp extends StatelessWidget{
   const MyApp({Key? key}) : super(key: key);
   
    @override
    Widget build(BuildContext context) {
      return Provider(
        create: (context) => Counter() ,
        child: MaterialApp(
                  theme: ThemeData(
                      primarySwatch: Colors.pink,
                  ),
                  title: 'First Flutter App',
                  initialRoute: '/', // สามารถใช้ home แทนได้
                  routes: {
                      Launcher.routeName: (context) => Launcher(),
                  },
          )
        );
    }
}

Provider(
    create: (context) => Counter() ,
    child:......

)

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

import '../models/counter_model.dart';
  
class About extends StatefulWidget {
    static const routeName = '/about';
 
    const About({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _AboutState();
    }
}
  
class _AboutState extends State<About> {
  
    @override
    Widget build(BuildContext context) {
  
        return Scaffold(
            appBar: AppBar(
                title: Text('About Us'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('About Us Screen'),
                        Text(
                          '${context.watch<Counter>().count}',
                          key: const Key('counterState'),
                          style: Theme.of(context).textTheme.headline4),  
                        ElevatedButton(
                          onPressed: () => context.read<Counter>().reset(),
                          child: Text('Reset Counter'),
                        ),
                    ],
                )
            ),
        );
    }
}

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

import '../models/counter_model.dart';
  
class Profile extends StatefulWidget {
    static const routeName = '/profile';
 
    const Profile({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _ProfileState();
    }
}
  
class _ProfileState extends State<Profile> {
  
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Profile'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Profile Screen'),
                        Text('You have pushed the button this many times:'),
                        Count(),
                    ],
                )
            ),
            floatingActionButton: FloatingActionButton(
              key: const Key('increment_Button'),
              onPressed: () => context.read<Counter>().increment(),
              child: const Icon(Icons.add),
            ),
        );
    }
}


class Count extends StatelessWidget {
  const Count({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        '${context.watch<Counter>().count}',
        key: const Key('counterState'),
        style: Theme.of(context).textTheme.headline4);
  }
}

context.watch() // ใช้สำหรับทำคำสั่งและรองรับการ build ใหม่ เมื่อมีการแจ้งเตือน
context.read() // ใช้สำหรับทำคำสั่งแต่ะจะไม่ build ใหม่ 

context.watch<Counter>().count  // เรียก getter ข้อมูลจากตัวแปร _count
context.read<Counter>().increment() // เรียกทำคำสั่งเพิ่มจำนวน
context.read<Counter>().reset() // เรียกทำคำสั่งรีเซ็ตจำนวน

class Count extends StatelessWidget {
  const Count({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        '${context.watch<Counter>().count}',
        key: const Key('counterState'),
        style: Theme.of(context).textTheme.headline4);
  }
}

return MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => Counter()),
  ], 
  child: MaterialApp(
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            title: 'First Flutter App',
            initialRoute: '/', // สามารถใช้ home แทนได้
            routes: {
                Launcher.routeName: (context) => Launcher(),
            },
    )
  );

context.watch<Counter>().count}

class _AboutState extends State<About> {
  
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('About Us'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('About Us Screen'),
                        Count(),  
                        ElevatedButton(
                          onPressed: () => context.read<Counter>().reset(),
                          child: Text('Reset Counter'),
                        ),
                    ],
                )
            ),
        );
    }
}

class Count extends StatelessWidget {
  const Count({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        '${context.watch<Counter>().count}',
        key: const Key('counterState'),
        style: Theme.of(context).textTheme.headline4);
  }
}

class _AboutState extends State<About> {
  
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('About Us'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('About Us Screen'),
                        Consumer<Counter>(
                          builder: (context, counter, child) {
                              return Text(
                                  '${counter.count}',
                                  key: const Key('counterState'),
                                  style: Theme.of(context).textTheme.headline4);
                            },
                        ),  
                        ElevatedButton(
                          onPressed: () => context.read<Counter>().reset(),
                          child: Text('Reset Counter'),
                        ),
                    ],
                )
            ),
        );
    }
}

Consumer<T>(
  builder: (context, ตัวแปรอ้างอิง T, child) {
      return .....
    },
 //  child: // มี child หรือไม่ก็ได้ ส่วนนี้จะไม่มีการ rebuild เพราะอยู่นอก builder
),  

Consumer<Counter>(
  builder: (context, counter, child) {
      return Text(
          '${counter.count}',
          key: const Key('counterState'),
          style: Theme.of(context).textTheme.headline4);
    },
),  

Counter counter = context.read<Counter>();

class _AboutState extends State<About> {
  
    @override
    Widget build(BuildContext context) {
        Counter counter = context.read<Counter>();
        // หรือ กรรณีไม่ได้ใช้ค่าจาก Cusumer 
        // Counter counter = context.watch<Counter>();
        
        return Scaffold(
            appBar: AppBar(
                title: Text('About Us'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('About Us Screen'),
                        Consumer<Counter>(
                          builder: (context, counter, child) {
                              return Text(
                                  '${counter.count}',
                                  key: const Key('counterState'),
                                  style: Theme.of(context).textTheme.headline4);
                            },
                        ),  
                        ElevatedButton(
                          onPressed: () => counter.reset(),
                          child: Text('Reset Counter'),
                        ),
                    ],
                )
            ),
        );
    }
}

Consumer<Counter>(
  builder: (context, counter, child) {
      return Column(
        children: [
          Text(
            '${counter.count}',
            key: const Key('counterState'),
            style: Theme.of(context).textTheme.headline4),
          if (child != null) child,
        ],
      );
    },
  child: ElevatedButton(
    onPressed: () => counter.reset(),
    child: Text('Reset Counter'),
  ),
),  

if (child != null) child, // ตรวจสอบว่ามีการกำหนด child หรือไม่