Summary - Riverpod basics
- Flutter course
- Intermediate
- Lesson 15/99
- 4 min
Combine Riverpod, Provider and ConsumerWidget to make a counter.
Summary - Riverpod basics
In this section you learned three things: with Riverpod you do state management independent of BuildContext; with Provider and StateProvider you declare values and writable state; with ConsumerWidget you listen to providers using ref.watch.
final counterP = StateProvider<int>((ref) => 0);
ref.watch(counterP);
ref.read(counterP).state++;Combining these, you build a counter screen.
Practice Build a counter screen
Declare a StateProvider<int> named sayacP with initial value 0. In Ekrani ConsumerWidget, display the value with ref.watch(sayacP). On button press, call ref.read(sayacP).state++. In main, call print('sayaç açıldı') and wrap the root with ProviderScope.
Starter code
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// sayacP: StateProvider<int> 0
void main() {
print('sayaç açıldı');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ekrani());
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text('?')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final sayacP = StateProvider<int>((ref) => 0);
void main() {
print('sayaç açıldı');
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ekrani());
}
}
class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final sayac = ref.watch(sayacP);
return Scaffold(
body: Center(child: Text('$sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(sayacP).state++,
child: Icon(Icons.add),
),
);
}
}Expected output
sayaç açıldı
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget is used to access and listen to a provider in Riverpod?
- InheritedWidget
- StatefulWidget
- StatelessWidget
- ConsumerWidget Correct answer
Explanation: ConsumerWidget adds a ref parameter to the build method; thus providers are accessed with ref.watch and ref.read.
2 Declare a StateProvider
final sayacP = ____<int>((ref) => 0);final sayacP = StateProvider<int>((ref) => 0);Explanation: StateProvider is used for writable state; it is updated via the state property.
3 Riverpod basic parts
| Term | Meaning |
|---|---|
ProviderScope |
Wraps the app root |
Provider |
Produces a read-only value |
StateProvider |
Holds writable state |
ConsumerWidget |
Accesses providers via ref |