Provider: vad är det, tillståndshanterare för Flutter-applikationer
Provider — ett paket för tillståndshantering för Flutter, skapat av Rémi Rousselet 2019 som ett wrapper över InheritedWidget. Provider löser problemet med att överföra data ner i widget-trädet utan props drilling: vilken widget som helst får åtkomst till tillståndet via context.read<T>() eller context.watch<T>(). Enligt pub.dev är Provider den mest populära tillståndshanteraren för Flutter med över 25 tusen gillamarkeringar.
Huvudsakligt
- ChangeNotifier — klass med notifyListeners för att meddela prenumeranter om ändring
- Consumer — widget som byggs om när ChangeNotifier ändras
- MultiProvider — komposition av flera Provider utan nästling
- ProxyProvider — Provider som är beroende av en annan Provider
- context.read / context.watch — metoder för att läsa tillstånd utan och med prenumeration
Vad är Provider?
Provider — ett paket för tillståndshantering och beroendeinjektion i Flutter, byggt ovanpå InheritedWidget. Provider gör ett objekt (tillstånd, tjänst, förråd) tillgängligt i widget-trädet och bygger automatiskt om UI när data ändras. Till skillnad från direkt användning av InheritedWidget tar Provider bort all boilerplate.
Provider är officiellt rekommenderat av Google för tillståndshantering i Flutter (Flutter Team, 2019-2023). Enligt Flutter Community Survey 2025 används Provider i 72% av Flutter-applikationerna.
ChangeNotifier och notifyListeners
ChangeNotifier — inbyggd Flutter-klass som implementerar Listener-mönstret. ChangeNotifier meddelar prenumeranter om ändring via anropet notifyListeners().
Dart
class CounterProvider extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
void reset() {
_count = 0;
notifyListeners();
}
}Regler för notifyListeners: anropa efter fullständig dataändring — inte i mitten av metoden, utan i slutet. Om metoden utför flera ändringar, anropa notifyListeners() en gång efter alla ändringar.
Consumer och context.watch
Consumer — widget som prenumererar på ChangeNotifier och byggs om vid varje anrop av notifyListeners().
Dart
Consumer<CounterProvider>(
builder: (context, provider, child) => Column(
children: [
child!, // byggs inte om
Text('${provider.count}'),
ElevatedButton(
onPressed: () => provider.increment(),
child: Icon(Icons.add),
),
],
),
child: Text('Räknare:'),
)context.watch — BuildContext-tilläggsmetod för att prenumerera på Provider. context.read — åtkomst utan prenumeration. context.select — prenumeration på ett specifikt fält i modellen.
MultiProvider och ProxyProvider
MultiProvider — widget för att registrera flera Provider utan nästling. ProxyProvider — Provider som är beroende av en annan Provider.
Dart
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CartProvider()),
ChangeNotifierProvider(create: (_) => AuthProvider()),
ProxyProvider<AuthProvider, OrderProvider>(
update: (_, auth, __) => OrderProvider(auth.userId),
),
],
child: MaterialApp(home: HomePage()),
)Testa Provider
Provider testas genom att slå in widgeten i MultiProvider med testvärden.
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: prestanda och begränsningar
Provider-prestanda baseras på InheritedWidget: när Provider ändras byggs alla widgetar som prenumererar via context.watch eller Consumer om. Använd context.select, Consumer med child-parameter och const för statiska widgetar.
| Metod | Prenumeration | Ombyggnad | Användning |
|---|---|---|---|
| context.watch | Hela modellen | Varje ändring | Enkla widgetar |
| Consumer | Hela modellen | Varje ändring | Med child-optimering |
| context.select | Specifikt fält | Endast när fältet ändras | Komplexa modeller |
| context.read | Ingen | Aldrig | Händelsehanterare |
Vanliga frågor
Vad är skillnaden mellan Provider och BLoC?
Provider — ett wrapper över InheritedWidget för beroendeinjektion med ChangeNotifier. BLoC — ett arkitekturmönster med Event + Stream för logikisolering.
Vad är ChangeNotifierProvider?
ChangeNotifierProvider — en typ av Provider för ChangeNotifier-instanser. Skapar objekt via create, tillgängliggör det för descendants och bygger om Consumer vid anrop av notifyListeners.
Hur undviker man onödig ombyggnad med Provider?
Använd context.select istället för context.watch. Dela upp stora ChangeNotifier i flera små.
Kan man använda Provider utan ChangeNotifier?
Ja. Provider för oföränderliga objekt. StreamProvider för strömmar. FutureProvider för Future. ProxyProvider för Provider som är beroende av andra.
Vad är ProviderNotFoundException?
ProviderNotFoundException — ett runtime-undantag som uppstår när man försöker hämta en Provider som inte har deklarerats högre upp i widget-trädet.
Sammanfattning
- Provider — wrapper över InheritedWidget för tillståndshantering och DI i Flutter
- ChangeNotifier — klass med notifyListeners för reaktiv UI-uppdatering
- Consumer och context.watch — prenumeration på ändringar med automatisk ombyggnad
- MultiProvider — komposition av provider utan trädnästling
- ProxyProvider — beroendekedja mellan Provider
- context.select — punktprenumeration på ett specifikt modellfält
- StreamProvider och FutureProvider — inbyggt stöd för reaktiva och asynkrona data
Vi utvecklar en mobil applikation nyckelfärdigt
IT Sectr skapar iOS- och Android-applikationer för startups och företag sedan 2017. Vi ger dig råd och föreslår den bästa lösningen.
Läs också