Provider: ano ito, tagapamahala ng estado ng Flutter applications
Provider — pakete para sa pamamahala ng estado para sa Flutter, nilikha ni Rémi Rousselet noong 2019 bilang isang wrapper sa InheritedWidget. Nilulutas ng Provider ang problema ng pagpapasa ng data pababa sa widget tree nang walang props drilling: anumang widget ay nakakakuha ng access sa estado sa pamamagitan ng context.read<T>() o context.watch<T>(). Ayon sa pub.dev, ang Provider ang pinakasikat na tagapamahala ng estado ng Flutter na may higit sa 25 libong likes.
Mga Pangunahing Punto
- ChangeNotifier — klase na may notifyListeners para ipaalam sa mga subscriber ang tungkol sa pagbabago
- Consumer — widget na muling nagtatayo kapag nagbago ang ChangeNotifier
- MultiProvider — komposisyon ng maraming Provider nang walang nesting
- ProxyProvider — Provider na nakadepende sa ibang Provider
- context.read / context.watch — mga paraan ng pagbasa ng estado nang walat may subscription
Ano ang Provider?
Provider — pakete para sa pamamahala ng estado at dependency injection sa Flutter, binuo sa ibabaw ng InheritedWidget. Nagbibigay ang Provider ng object (estado, serbisyo, repository) sa widget tree at awtomatikong muling nagtatayo ng UI kapag nagbago ang data. Hindi tulad ng direktang paggamit ng InheritedWidget, inaalis ng Provider ang lahat ng boilerplate.
Opisyal na inirerekomenda ng Google ang Provider para sa pamamahala ng estado sa Flutter (Flutter Team, 2019-2023). Ayon sa Flutter Community Survey 2025, ginagamit ang Provider sa 72% ng Flutter applications.
ChangeNotifier at notifyListeners
ChangeNotifier — built-in na Flutter class na nagpapatupad ng Listener pattern. Inaabisuhan ng ChangeNotifier ang mga subscriber tungkol sa pagbabago sa pamamagitan ng pagtawag ng notifyListeners().
Dart
class CounterProvider extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
void reset() {
_count = 0;
notifyListeners();
}
}Mga patakaran ng notifyListeners: tawagan pagkatapos ng kumpletong pagbabago ng data — hindi sa gitna ng method, kundi sa dulo.
Consumer at context.watch
Consumer — widget na nagsa-subscribe sa ChangeNotifier at muling nagtatayo sa bawat tawag ng notifyListeners().
Dart
Consumer<CounterProvider>(
builder: (context, provider, child) => Column(
children: [
child!, // hindi muling itinatayo
Text('${provider.count}'),
ElevatedButton(
onPressed: () => provider.increment(),
child: Icon(Icons.add),
),
],
),
child: Text('Bilang:'),
)context.watch — BuildContext extension method para mag-subscribe sa Provider. context.read — access nang walang subscription. context.select — subscription sa isang partikular na field ng modelo.
MultiProvider at ProxyProvider
MultiProvider — widget para magrehistro ng maraming Provider nang walang nesting. ProxyProvider — Provider na nakadepende sa ibang Provider.
Dart
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CartProvider()),
ChangeNotifierProvider(create: (_) => AuthProvider()),
ProxyProvider<AuthProvider, OrderProvider>(
update: (_, auth, __) => OrderProvider(auth.userId),
),
],
child: MaterialApp(home: HomePage()),
)Pag-test ng Provider
Provider ay sinusuri sa pamamagitan ng pagbalot ng widget sa MultiProvider na may test values.
Dart
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Counter increments on button tap',
(tester) async {
await tester.pumpWidget(
ChangeNotifierProvider(
create: (_) => CounterProvider(),
child: CounterScreen(),
),
);
await tester.tap(find.byKey(Key('increment')));
await tester.pump();
expect(find.text('1'), findsOneWidget);
},
);
}Provider: pagganap at mga limitasyon
Pagganap ng Provider ay batay sa InheritedWidget: kapag nagbago ang Provider, lahat ng widget na naka-subscribe sa pamamagitan ng context.watch o Consumer ay muling itinatayo.
| Paraan | Subscription | Muling itayo | Gamit |
|---|---|---|---|
| context.watch | Buong modelo | Bawat pagbabago | Simpleng widget |
| Consumer | Buong modelo | Bawat pagbabago | May child optimization |
| context.select | Tiyak na field | Kapag nagbago ang field | Komplikadong modelo |
| context.read | Wala | Hindi kailanman | Event handlers |
Mga Madalas Itanong
Ano ang pagkakaiba ng Provider sa BLoC?
Provider — wrapper sa InheritedWidget para sa dependency injection na may ChangeNotifier. BLoC — architectural pattern na may Event + Stream para sa isolation ng lohika.
Ano ang ChangeNotifierProvider?
ChangeNotifierProvider — uri ng Provider para sa mga instance ng ChangeNotifier. Gumagawa ng object sa pamamagitan ng create, ibinibigay ito sa mga descendant at muling itinatayo ang Consumer kapag tinawag ang notifyListeners.
Paano maiiwasan ang hindi kinakailangang muling pagtatayo gamit ang Provider?
Gamitin ang context.select sa halip na context.watch. Hatiin ang malalaking ChangeNotifier sa maraming maliliit.
Maaari bang gamitin ang Provider nang walang ChangeNotifier?
Oo. Provider para sa mga hindi nababagong object. StreamProvider para sa stream. FutureProvider para sa Future. ProxyProvider para sa Provider na nakadepende sa iba.
Ano ang ProviderNotFoundException?
ProviderNotFoundException — runtime exception na nangyayari kapag sinusubukang kumuha ng Provider na hindi idineklara nang mas mataas sa widget tree.
Buod
- Provider — wrapper sa InheritedWidget para sa pamamahala ng estado at DI sa Flutter
- ChangeNotifier — klase na may notifyListeners para sa reaktibong UI update
- Consumer at context.watch — subscription sa mga pagbabago na may awtomatikong muling pagtatayo
- MultiProvider — komposisyon ng provider nang walang nesting ng tree
- ProxyProvider — chain ng dependency sa pagitan ng mga Provider
- context.select — point subscription sa isang partikular na field ng modelo
- StreamProvider at FutureProvider — built-in na suporta para sa reaktibo at asinkronong data
Gagawa kami ng mobile application na turnkey
Gumagawa ang IT Sectr ng mga iOS at Android application para sa mga startup at negosyo mula noong 2017. Magpapayo kami sa iyo at magmumungkahi ng pinakamahusay na solusyon.
Basahin din