Provider and StateProvider

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.

Exercise 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ç: ${...}').

Show example 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');
}

Test yourself

Which provider holds state that is both readable and writable?
- StreamProvider
- Provider
- FutureProvider
- StateProvider
Show answer

StateProvider — StateProvider holds writable state; it is updated via the state property. Provider only produces a read-only value.

Update the StateProvider

final sayacP = StateProvider<int>((ref) => 0);

void artir(WidgetRef ref) {
  ref.read(sayacP).____++;
}

Show answer

final sayacP = StateProvider<int>((ref) => 0);

void artir(WidgetRef ref) {
  ref.read(sayacP).state++;
}

Provider and StateProvider parts

Provider

Produces a read-only value
StateProvider

Holds writable state
state

StateProvider's update property
ref.read

Method to access a provider

Next lesson: ConsumerWidget

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies