Provider: mi ez, Flutter alkalmazások állapotkezelője
Provider — állapotkezelő csomag Flutter-hez, amelyet Rémi Rousselet készített 2019-ben az InheritedWidget burkolójaként. A Provider megoldja az adatok widget-fában történő props drilling nélküli továbbításának problémáját: bármely widget hozzáfér az állapothoz a context.read<T>() vagy context.watch<T>() segítségével. A pub.dev szerint a Provider a legnépszerűbb Flutter állapotkezelő több mint 25 ezer like-kal.
Lényeg
- ChangeNotifier — osztály notifyListeners-szel az előfizetők értesítésére a változásról
- Consumer — widget, amely újraépül a ChangeNotifier változásakor
- MultiProvider — több Provider kompozíciója egymásba ágyazás nélkül
- ProxyProvider — Provider, amely egy másik Provider-től függ
- context.read / context.watch — állapot olvasásának módszerei előfizetés nélkül és előfizetéssel
Mi az a Provider?
Provider — csomag állapotkezeléshez és függőséginjektáláshoz Flutter-ben, az InheritedWidget tetejére építve. A Provider egy objektumot (állapot, szolgáltatás, repository) tesz elérhetővé a widget-fában és automatikusan újraépíti az UI-t az adatok változásakor. Az InheritedWidget közvetlen használatával ellentétben a Provider eltávolítja az összes boilerplate-et.
A Provider a Google által hivatalosan ajánlott módszer az állapotkezelésre Flutter-ben (Flutter Team, 2019-2023). A Flutter Community Survey 2025 szerint a Provider a Flutter alkalmazások 72%-ban használják.
ChangeNotifier és notifyListeners
ChangeNotifier — beépített Flutter osztály, amely a Listener mintát valósítja meg. A ChangeNotifier értesíti az előfizetőket a változásról a notifyListeners() hívással.
Dart
class CounterProvider extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
void reset() {
_count = 0;
notifyListeners();
}
}notifyListeners szabályok: az adatok teljes változása után hívja — nem a metódus közepén, hanem a végén. Több változás esetén egyszer hívja notifyListeners()-t az összes változás után.
Consumer és context.watch
Consumer — widget, amely előfizet a ChangeNotifier-re és újraépül minden notifyListeners() híváskor.
Dart
Consumer<CounterProvider>(
builder: (context, provider, child) => Column(
children: [
child!, // nem épül újra
Text('${provider.count}'),
ElevatedButton(
onPressed: () => provider.increment(),
child: Icon(Icons.add),
),
],
),
child: Text('Számláló:'),
)context.watch — BuildContext kiterjesztési metódus a Provider-re való előfizetéshez. context.read — hozzáférés előfizetés nélkül. context.select — előfizetés a modell egy adott mezőjére.
MultiProvider és ProxyProvider
MultiProvider — widget több Provider regisztrálásához egymásba ágyazás nélkül. ProxyProvider — Provider, amely egy másik Provider-től függ.
Dart
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CartProvider()),
ChangeNotifierProvider(create: (_) => AuthProvider()),
ProxyProvider<AuthProvider, OrderProvider>(
update: (_, auth, __) => OrderProvider(auth.userId),
),
],
child: MaterialApp(home: HomePage()),
)Provider tesztelése
Provider tesztelése a widget MultiProvider-be csomagolásával történik tesztértékekkel.
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: teljesítmény és korlátok
A Provider teljesítménye az InheritedWidget-on alapul: a Provider változásakor az összes context.watch-on vagy Consumer-en keresztül előfizetett widget újraépül. Használja a context.select-et, a Consumer-t child paraméterrel és a const-ot statikus widgetekhez.
| Módszer | Előfizetés | Újraépítés | Használat |
|---|---|---|---|
| context.watch | Teljes modell | Bármilyen változás | Egyszerű widgetek |
| Consumer | Teljes modell | Bármilyen változás | Child optimalizálással |
| context.select | Adott mező | Csak a mező változásakor | Összetett modellek |
| context.read | Nincs | Soha | Eseménykezelők |
Gyakran Ismételt Kérdések
Miben különbözik a Provider a BLoC-tól?
Provider — burkoló az InheritedWidget körül függőséginjektáláshoz ChangeNotifier-rel. BLoC — architektúrai minta Event + Stream segítségével a logika elkülönítésére.
Mi az a ChangeNotifierProvider?
ChangeNotifierProvider — Provider típus ChangeNotifier példányokhoz. Létrehozza az objektumot create segítségével, elérhetővé teszi az utódok számára és újraépíti a Consumer-t a notifyListeners hívásakor.
Hogyan kerülhető el a felesleges újraépítés a Provider-rel?
Használja a context.select-et a context.watch helyett. Ossza fel a nagy ChangeNotifier-eket kisebbekre.
Használható a Provider ChangeNotifier nélkül?
Igen. Provider változatlan objektumokhoz. StreamProvider streamekhez. FutureProvider Future-höz. ProxyProvider más Provider-től függő Provider-ekhez.
Mi az a ProviderNotFoundException?
ProviderNotFoundException — futási idejű kivétel, amely akkor keletkezik, amikor megpróbálunk elérni egy Provider-t, amely nincs magasabban deklarálva a widget-fában.
Összefoglaló
- Provider — burkoló az InheritedWidget körül állapotkezeléshez és DI-hez Flutter-ben
- ChangeNotifier — osztály notifyListeners-szel reaktív UI frissítéshez
- Consumer és context.watch — előfizetés változásokra automatikus újraépítéssel
- MultiProvider — provider-ek kompozíciója fa egymásba ágyazása nélkül
- ProxyProvider — függőségi lánc Provider-ek között
- context.select — pontos előfizetés a modell egy adott mezőjére
- StreamProvider és FutureProvider — beépített támogatás reaktív és aszinkron adatokhoz
Kulcsrakész mobilalkalmazást fejlesztünk
Az IT Sectr 2017 óta készít iOS és Android alkalmazásokat induló vállalkozásoknak és vállalkozásoknak. Tanácsot adunk, és a legjobb megoldást javasoljuk.
Olvassa el is