a l

os ea
ok
or
n h K
Sa g i ut
rin So
ee s,
um
gin em am)
t
En ys S gr
of ion ele
O ter at
as m 2
(T
M orf 75
2
In 25
2
01
t
en
em
ag
3 an
M r
e
ate t
St ut
Fl
State Management
លំ នប
ំ ញ&ែដលេកត
 មនជមួយ setState()
§ េនកនុង Flutter 'េ(ប Reactive Programming ែដលកនុងេនះ េពលេយង  ចង់ update
ែផនកៃន UI 7មួយរបស់េយង  ។ =ល់េពលេយង  ចង់ដូរអ@ម
ី យ
ួ ដូចជចង់បូ រអកDរ
C បCូរពណ៌
ឬបCូរ Widget គេឺ យង
 (តKវេM setState()
េដម
 បឲយ'
ី build នូវ internal state
េឡង
 វញ។
ិ េហយ
 េយង
 (តKវេ(ប setState()
េនកនុង class ែដល inherit េចញពី
StatefulWidget។ សូ មេមល ឧទហរណ៍
ៃនករេ(ប setState()៖

3
4
បញ&ជមួយ setState()

§ េបេ ទះបជ
ី setState() (ចប*ូរ UI បនែមន លុ ះ34ែត UI ទំងេនះនង
ឹ សថិតេនកនុង
class ជមួយគន។ ប៉ុែន*Eមន
ិ (ចឆGងេឆGយ
 ទន
ិ ននយ
័ ែដលកនុង class េផLងគនបនេទ!

5
6
Flutter Widgets គជ
ឺ Tree

§ App េនកនុង Flutter គក

ឺ Oងៃនបណុ ំ* ៃន Widget ជេ3ចន
 គេលគន េហយ
 មនលកខ
ណៈ Tree។ េយង
 (ចេV setState() េនកនុង class េម េដម
 បបញ
ី ជ េ(យប*ូរ UI
កនុង class កូនបន។ ែតប៉ុែន*មន
ិ (ចេV setState កនុងកូនទ១
ី េហយ
 េទដូរ UI កនុង
កូនទ១ ី បនេទ៖

MyApp

MyButton MyText

7
State Management

§ State Management បេងកត  ជចំនុចក-. លមួយៃន4គប់4គង State។ State

 ំនួសឲយករេ? setState ពី class េទ class មួយេទDត។
Management គេឺ 4បជ
§ ខងេ4កមេនះគជ
ឺ package លបៗៃន
ី State Management៖
§ Provider (https://pub.dev/packages/provider )
§ Redux (https://pub.dev/packages/flutter_redux )
§ Fish-Redux (https://pub.dev/packages/fish_redux )
§ BloC (https://pub.dev/packages/flutter_bloc )
§ GetIt (https://pub.dev/packages/get_it )
§ MobX (https://pub.dev/packages/mobx )
§ Flutter Command (https://pub.dev/packages/flutter_command)
§ Binder (https://pub.dev/packages/binder )
§ GetX (https://pub.dev/packages/get )
§ RiverPod (https://pub.dev/packages/riverpod )

8
Provider
Provider

ឺ package មួយដំបូងេគែដល3ក]ម Google ែណនំឲយេ3ប3 បស់កុ ង

Provider គជ ន
3គប់3គង State។ ខងេ3កមេនះគជ
ឺ រេបcបៃនករេ3ប3 បស់៖
1. dក់ package Provider កនុង pubspec.yaml
សូ មេមល version របស់Eកនុង https://pub.dev/packages/provider
2. បេងកត
 class មួយែដល3តfវ extends កន់េទ ChangeNotifier។ ចំនុចសំ ខន់គឺ
េយង
 3តfវេV notifyListeners() េដម
 ប ី Provider ទទួលដង
ឹ ពប
ី ំiស់បូ រទ
* ន
ិ ននយ
័ ៖
import 'package:flutter/foundation.dart';

class CounterLogic extends ChangeNotifier{

int _counter = 0;
int get counter => _counter;
void increase(){
_counter++;
notifyListeners();
}
}

10
Lift-up State (េលក State េឡង
 េល)

3. 4មរយៈរូបខងេ3កម េយង
 េឃញ
 េហយ
 ថ MyButton នង
ិ MyText គស
ឺ ិ ថតេនពី
េ3កម MyApp។ ដូេចនះេដម
 បឲយ
ី MyButton (ចឆGងេឆGយ
 ជមួយ MyText បន េយង3តfវ
េលក State (Lift-up State) មកdក់3តង់ MyApp។ ដូេចនះេយង
 3តfវdក់ Provider េន
កនុង class MyApp 3តង់ចំនុចែបកែខនងរEង MyButton នង
ិ MyText៖

MyApp Provider

MyButton MyText

11
class MyScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("My Page"),
),
body: ChangeNotifierProvider(
create: (context) => CounterLogic(),
child: Container(
child: Column(
children: [
MyButton(),
MyText(),
],
),
),
),
);
}
}

12
េ7ប Provider េនកនុងWidget កូន េដមបេ>
ី State

4. េនកនុង Widget កូន េយង

 +ចេ- State .មរយៈ Provider៖
import 'package:provider/provider.dart';

class MyButton extends StatelessWidget {

@override
Widget build(BuildContext context) {

final CounterLogic logic = Provider.of<CounteLogic>(context);

return Expanded(
child: Center(
child: IconButton(
icon: Icon(
Icons.add_box_outlined, size: 30,
),
onPressed: () => logic.increase(),
,
),
),
);
}
}

13
class MyText extends StatelessWidget {
@override
Widget build(BuildContext context) {

final CounterLogic cm = Provider.of<CounterLogic>(context);

return Expanded(
child: Center(
child: Text("${logic.counter}", style: TextStyle(fontSize: 50)),
),
);
}
}

េយង
 Zចសេងកតេឃញ
 class ទំង២ MyButton នង
ិ MyText គប
ឺ ន extends េចញពី
StatelessWidget។ 'មនន័យ =ល់ករ update ទន
ិ ននយ
័ គ'
ឺ មន
ិ បន build េឡង
 វញេទ។
ិ

14
គួរទញ variable ឬ method េចញពី Logic

§ េនកនុង slide មុនេនះ េបេ ទះជេយង

 Zចទញទន
ិ ននយ
័ បនែមន ក៏បុែ៉ នCេយង  បនទញយក
CounterLogic ទំងមូលែតមCង។ ជំនួសឲយករទញយកទំងមូលេនះ េយង  Zចទញយកែត
method ឬ variable មួយែដលេយង
 ចង់េ(បប
 នេហយ
 ។ េយង
 បCូរពក
ី ូដខងេ(កមេនះ៖
final CounterLogic logic = Provider.of<CounterLogic>(context);
logic.increase();

េទជ៖ Provider.of<CounterLogic>(context, listen: false).increase();

class MyButton extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Expanded(
child: Center(
child: IconButton(
icon: Icon(Icons.add_box_outlined, size: 30,),
onPressed: () => Provider.of<CounterLogic>(context, listen: false).increase(),
,
),
),
);
}
}

15
§ ដូចគនេទនង
ឹ ករទញយក variable គេឺ យង
 គួរទញEផទល់។ ប*ូរពក
ី ូដខងេ3កម៖

final CounterLogic logic = Provider.of<CounterLogic>(context);

logic.counter;

េទជ៖ int counter = Provider.of<CounterLogic>(context).counter;

class MyText extends StatelessWidget {

@override
Widget build(BuildContext context) {
int counter = Provider.of<CounterLogic>(context).counter;
return Expanded(
child: Center(
child: Text("$counter", style: TextStyle(fontSize: 30)),
),
);
}
}

16
Consumer Class

§ Provider ក៏បនផ*ល់នូវ class មួយេឈមះថ Consumer សំ sប់េ(យ build UI

េនខងកនុងE៖
class MyOtherButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
child: Center(
child: Consumer<CounterLogic>(
builder: (context, cm, _){
return IconButton(
icon: Icon(
Icons.add_circle,
size: cm.counter.toDouble(),
),
onPressed: () => cm.increase(),
);
},
),
),
);
}
}

17
Method របស់ context

បនទប់ពេី យង
 បន import Provider េហយ
 គេឺ យង
 (ចេ3ប method របស់ context
បនែដរ ែដល method ទំងេនះ3សេដcងគននង
ឹ Provider៖
context.read(): E3គន់ែតផ*ល់នូវ Logic ែតEទទួលករផGស់បូ រេទ
*
(េ3បប
 នែតេនេ3ក build)
context.read<CounterLogic>().increase();
Provider.of<CounterLogic>(context, listen: false).increase();

context.watch(): េពលេយង
 េ3បE
 េយង
 នង
ឹ េធvឲ
 យ Logic ផGស់បូ រ* នង
ិ ទទួលករ
ផGស់បូ រមកវ
* ញិ (េ3បប
 នែតេនកនុង build)
int counter = context.watch<CounterLogic>().counter;
int counter = Provider.of<CounterLogic>(context).counter;

18
§ context.select(): េពលេយង
 េ3បE
 េដម
 បទទួ
ី លករផGស់បូ រែតែផន
* កតូចមួយ
wមួយៃន Logic ែតប៉ុេwx ះ (េ3បប
 នែតេនកនុង build)
int counter = context.select<CounterLogic, int>((cm) => cm.counter);

class MyText extends StatelessWidget {

@override
Widget build(BuildContext context) {
int counter = context.select<CounterLogic, int>((cl) => cl.counter);
return Expanded(
child: Center(
child: Text("$counter", style: TextStyle(fontSize: 30)),
),
);
}
}

19
MultiProvider

§ េនេពលខGះ េយង
 មន Logic េ3ចន
 ជងមួយ។ ដូេចនះេយង
 (ចេ3ប MultiProvider
េដម
 បdក់
ី Provider ទំងេនះបន៖
import 'counter_Logic.dart';
import 'my_screen.dart';
import 'theme_Logic.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider/single_child_widget.dart';

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MultiProvider(
providers: _providers,
child: MaterialApp(home: MyScreen()),
);
}

final List<SingleChildWidget> _providers = [

ChangeNotifierProvider(create: (context) => CounterLogic()),
ChangeNotifierProvider(create: (context) => ThemeLogic()),
];
}

20
import 'package:flutter/foundation.dart';

class ThemeLogic extends ChangeNotifier{

bool _isDark = false;

bool get isDark => _isDark;

void setDark(bool dark) {

_isDark = dark;
notifyListeners();
}
}

21
ProxyProvider

§ ករណីខ6ះេយង
 មន Provider ២ ែដល Provider2 =+>ស័យេទ
Provider1។ ដូេចនះេយង
 +ចេ>ប ProxyProvider បន ែដលេយង
 េ>ប
=េដម
 បបញច
ី ូ លតំៃលពី Provider មួយេទ Provider មួយេទNត។

final List<SingleChildWidget> _providers = [

ChangeNotifierProvider(create: (context) => CounterLogic()),
ProxyProvider<CounterLogic, CounterStringLogic>(
update: (context, counterLogic, counterStringLogic) {
return CounterStringLogic(counterLogic);
}),

22
import 'counter_Logic.dart';

class CounterStringLogic {
CounterLogic counterLogic;
CounterStringLogic(this.counterLogic);

String get counterString {

int c = counterLogic.counter;
return "$c item${ c != 0 ? 's' : ''}";
}
}

//Example of Calling…
class MyStringText extends StatelessWidget {
@override
Widget build(BuildContext context) {
String counter = context.read<CounterStringLogic>().counterString;
return Expanded(
child: Center(
child: Text("$counter",
style: TextStyle(fontSize: 20, color: Colors.pink)),
),
);
}
}

23