Provider: apa itu, manajer state aplikasi Flutter
Provider — paket manajemen state untuk Flutter, dibuat oleh Rémi Rousselet pada 2019 sebagai wrapper di atas InheritedWidget. Provider memecahkan masalah pengiriman data ke bawah pohon widget tanpa props drilling: widget apa pun mendapatkan akses ke state melalui context.read<T>() atau context.watch<T>(). Menurut pub.dev, Provider adalah manajer state Flutter paling populer dengan lebih dari 25 ribu suka.
Poin Utama
- ChangeNotifier — kelas dengan notifyListeners untuk memberi tahu pelanggan tentang perubahan
- Consumer — widget yang membangun ulang saat ChangeNotifier berubah
- MultiProvider — komposisi beberapa Provider tanpa nesting
- ProxyProvider — Provider yang bergantung pada Provider lain
- context.read / context.watch — metode membaca state tanpa dan dengan langganan
Apa itu Provider?
Provider — paket untuk manajemen state dan injeksi dependensi di Flutter, dibangun di atas InheritedWidget. Provider menyediakan objek (state, layanan, repositori) di pohon widget dan secara otomatis membangun ulang UI saat data berubah. Tidak seperti penggunaan langsung InheritedWidget, Provider menghilangkan semua boilerplate.
Provider adalah cara yang secara resmi direkomendasikan Google untuk manajemen state di Flutter (Flutter Team, 2019-2023). Menurut Flutter Community Survey 2025, Provider digunakan di 72% aplikasi Flutter.
ChangeNotifier dan notifyListeners
ChangeNotifier — kelas bawaan Flutter yang mengimplementasikan pola Listener. ChangeNotifier memberi tahu pelanggan tentang perubahan melalui panggilan notifyListeners().
Dart
class CounterProvider extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
void reset() {
_count = 0;
notifyListeners();
}
}Aturan notifyListeners: panggil setelah perubahan data lengkap — bukan di tengah metode, tetapi di akhir. Jika metode melakukan beberapa perubahan, panggil notifyListeners() sekali setelah semua perubahan.
Consumer dan context.watch
Consumer — widget yang berlangganan ke ChangeNotifier dan membangun ulang pada setiap panggilan notifyListeners(). Consumer menerima fungsi builder dengan tiga parameter: context, model, child.
Dart
Consumer<CounterProvider>(
builder: (context, provider, child) => Column(
children: [
child!, // tidak dibangun ulang
Text('${provider.count}'),
ElevatedButton(
onPressed: () => provider.increment(),
child: Icon(Icons.add),
),
],
),
child: Text('Penghitung:'),
)context.watch — metode ekstensi BuildContext untuk berlangganan ke Provider. context.read — akses tanpa langganan. context.select — langganan ke bidang tertentu dari model.
MultiProvider dan ProxyProvider
MultiProvider — widget untuk mendaftarkan beberapa Provider tanpa nesting. MultiProvider menerima daftar provider.
Dart
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CartProvider()),
ChangeNotifierProvider(create: (_) => AuthProvider()),
ProxyProvider<AuthProvider, OrderProvider>(
update: (_, auth, __) => OrderProvider(auth.userId),
),
],
child: MaterialApp(home: HomePage()),
)ProxyProvider — Provider yang bergantung pada Provider lain. StreamProvider dan FutureProvider — untuk data reaktif dan asinkron.
Menguji Provider
Provider diuji dengan membungkus widget dalam MultiProvider dengan nilai pengujian. Untuk pengujian tidak diperlukan API nyata atau basis data.
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: kinerja dan keterbatasan
Kinerja Provider didasarkan pada InheritedWidget: saat Provider berubah, semua widget yang berlangganan melalui context.watch atau Consumer dibangun ulang. Gunakan context.select, Consumer dengan parameter child dan const untuk widget statis.
| Metode | Langganan | Bangun Ulang | Penggunaan |
|---|---|---|---|
| context.watch | Model penuh | Setiap perubahan | Widget sederhana |
| Consumer | Model penuh | Setiap perubahan | Dengan optimasi child |
| context.select | Bidang tertentu | Hanya saat bidang berubah | Model kompleks |
| context.read | Tidak | Tidak pernah | Handler acara |
Pertanyaan yang Sering Diajukan
Apa perbedaan Provider dengan BLoC?
Provider — wrapper di atas InheritedWidget untuk injeksi dependensi dengan ChangeNotifier. BLoC — pola arsitektur dengan Event + Stream untuk isolasi logika.
Apa itu ChangeNotifierProvider?
ChangeNotifierProvider — tipe Provider untuk instance ChangeNotifier. Membuat objek melalui create, menyediakannya ke descendant dan membangun ulang Consumer saat notifyListeners dipanggil.
Bagaimana cara menghindari pembangunan ulang yang tidak perlu dengan Provider?
Gunakan context.select sebagai ganti context.watch. Bagi ChangeNotifier besar menjadi beberapa yang kecil. Gunakan Consumer child untuk bagian statis.
Bisakah Provider digunakan tanpa ChangeNotifier?
Ya. Provider untuk objek yang tidak dapat diubah. StreamProvider untuk stream. FutureProvider untuk Future. ProxyProvider untuk Provider yang bergantung pada Provider lain.
Apa itu ProviderNotFoundException?
ProviderNotFoundException — pengecualian runtime yang terjadi saat mencoba mendapatkan Provider yang tidak dideklarasikan lebih tinggi di pohon widget.
Kesimpulan
- Provider — wrapper di atas InheritedWidget untuk manajemen state dan DI di Flutter
- ChangeNotifier — kelas dengan notifyListeners untuk pembaruan UI reaktif
- Consumer dan context.watch — langganan perubahan dengan pembangunan ulang otomatis
- MultiProvider — komposisi provider tanpa nesting pohon
- ProxyProvider — rantai ketergantungan antar Provider
- context.select — langganan titik ke bidang model tertentu
- StreamProvider dan FutureProvider — dukungan bawaan untuk data reaktif dan asinkron
Kami akan mengembangkan aplikasi seluler turnkey
IT Sectr membuat aplikasi iOS dan Android untuk startup dan bisnis sejak 2017. Kami akan memberi saran dan mengusulkan solusi terbaik.
Baca juga