ConsumerWidget
- Flutter course
- Intermediate
- Lesson 13/99
- 4 min
Access ref with ConsumerWidget.
ConsumerWidget
ConsumerWidget is the widget used to access ref in Riverpod. It replaces StatelessWidget and adds a ref parameter to the build method.
class Screen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final value = ref.watch(nameP);
return Text(value);
}
}ref is tied to the widget.
Listening with ref.watch
Inside ConsumerWidget, you listen to a provider with ref.watch(provider). When the provider changes, the build method is called automatically.
final count = ref.watch(counterP);
Text('$count');When StateProvider's state changes, the widget updates.
Practice Read provider with ConsumerWidget
Declare a Provider<String> named selamP returning 'Merhaba'. Make Ekrani a ConsumerWidget; in its build method, get the value with ref.watch(selamP) and display it as Text. In main, call print('ekran açıldı').
Starter code
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// selamP: Provider<String> 'Merhaba'
void main() {
print('ekran açıldı');
runApp(ProviderScope(child: 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('?')));
}
}Sample solution
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final selamP = Provider<String>((ref) => 'Merhaba');
void main() {
print('ekran 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 selam = ref.watch(selamP);
return Scaffold(body: Center(child: Text(selam)));
}
}Expected output
ekran açıldı
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How many parameters does ConsumerWidget's build method take?
- Only context
- context and ref Correct answer
- Only ref
- None
Explanation: ConsumerWidget's build method takes both context and WidgetRef ref parameters; this differs from StatelessWidget.
2 ConsumerWidget build signature
class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, ____ ref) {
return Container();
}
}class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Container();
}
}Explanation: ConsumerWidget's build method takes WidgetRef ref as the second parameter; this provides access to providers.
3 ConsumerWidget parts
| Term | Meaning |
|---|---|
ConsumerWidget |
Riverpod alternative to StatelessWidget |
ref |
Object to access providers |
ref.watch |
Listens provider and triggers rebuild |
WidgetRef |
Type of the ref parameter |