Provider and StateProvider
- Flutter course
- Intermediate
- Lesson 12/99
- 4 min
Learn the difference between Provider and StateProvider.
Provider and StateProvider
Provider produces a read-only value; it is immutable. StateProvider holds a readable and writable state; it is updated via the state property.
final nameP = Provider((ref) => 'Ayşe');
final counterP = StateProvider((ref) => 0);
ref.read(counterP).state++;StateProvider is ideal for simple state.
Using StateProvider
With StateProvider you declare a simple state and update it via ref.read(stateP).state. When you assign a new value to state, listening widgets rebuild automatically.
final selectedP = StateProvider<bool>((ref) => false);
ref.read(selectedP).state = true;The change immediately reflects to all listening widgets.
Practice Declare Provider and StateProvider
Declare a Provider<String> named isimP returning 'Ayşe'. Declare a StateProvider<int> named sayacP with initial value 0. In main, create a ProviderContainer, read both and print with print('isim: ${...} sayaç: ${...}').
Starter code
import 'package:flutter_riverpod/flutter_riverpod.dart';
// isimP: Provider<String> 'Ayşe'
// sayacP: StateProvider<int> 0
void main() {
final container = ProviderContainer();
// isimP ve sayacP'yi oku ve yazdır
}Sample solution
import 'package:flutter_riverpod/flutter_riverpod.dart';
final isimP = Provider<String>((ref) => 'Ayşe');
final sayacP = StateProvider<int>((ref) => 0);
void main() {
final container = ProviderContainer();
final isim = container.read(isimP);
final sayac = container.read(sayacP);
print('isim: $isim sayaç: $sayac');
}Expected output
isim: Ayşe sayaç: 0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which provider holds state that is both readable and writable?
- StreamProvider
- Provider
- FutureProvider
- StateProvider Correct answer
Explanation: StateProvider holds writable state; it is updated via the state property. Provider only produces a read-only value.
2 Update the StateProvider
final sayacP = StateProvider<int>((ref) => 0);
void artir(WidgetRef ref) {
ref.read(sayacP).____++;
}final sayacP = StateProvider<int>((ref) => 0);
void artir(WidgetRef ref) {
ref.read(sayacP).state++;
}Explanation: To update a StateProvider, ref.read(sayacP).state is assigned a new value; this rebuilds listening widgets.
3 Provider and StateProvider parts
| Term | Meaning |
|---|---|
Provider |
Produces a read-only value |
StateProvider |
Holds writable state |
state |
StateProvider's update property |
ref.read |
Method to access a provider |