Why "StateNotifierProvider + Consumer" is not rebuilding the widget? - flutter

Question

This is de main.dart file of a flutter app using riverpod_flutter package.
Starting at 3, the counter is increasing its value by 2 on each click, but the screen doesn't refresh (it shows 3 while the console prints: 5, 7, 9, etc...).
This is the code for "StateNotifierProvider + Consumer", but I get the same result when using ConsumerWidget instead of Consumer.
Any suggestion?
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter());
class Counter extends StateNotifier<int> {
Counter() : super(3);
String toString() => state.toString();
void increment() => state++;
void decrement() => state--;
}
void main() {
runApp(ProviderScope(
child: MyApp(),
));
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RiverPod Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RiverPod example'),
),
body: Container(
child: Center(
child: Consumer(builder: (context, watch, child) {
Counter data = context.read(counterProvider.notifier);
Counter data2 = watch(counterProvider.notifier);
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(data.toString()),
Text(data2.toString()),
SizedBox(
height: 10,
),
FloatingActionButton(
onPressed: () {
context.read(counterProvider.notifier).increment();
data2.increment();
print(data.toString());
},
child: const Icon(Icons.add),
)
],
);
}),
),
),
);
}
}
Thank you.

Answer 1

With watch(counterProvider.notifier), you are not actually watching the state, but you are watching the notifier itself (that is why you can call increment). You should not use watch to get the notifier, but only context.read (as you did with the data property).
To rebuild when the state changes, you have to watch the actual state: watch(counterProvider);. This will return the integer state, which you can then use to display the current value.
You also should not get the state directly from the notifier (your toString) method. The StateNotifier should be used to manage te state, but the actual state itself should be used to render the Widgets.

Answer 2

Change 1:
Instead of this:
Counter data = context.read(counterProvider.notifier);
Counter data2 = watch(counterProvider.notifier);
Use this:
final int data = context.read(counterProvider);
final int data2 = watch(counterProvider);
Change 2:
Instead of this:
context.read(counterProvider.notifier).increment();
data2.increment();
Use this:
context.read(counterProvider.notifier).increment();
watch(counterProvider.notifier).increment();
Change 3 (optional, no needed to make it work):
Comment this line:
//String toString() => state.toString();
Change 4 (optional, no needed to make it work):
Instead of this:
final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter());
Use this:
final counterProvider = StateNotifierProvider((ref) => Counter());
But if you do, you need to change also this:
final int data = context.read(counterProvider);
final int data2 = watch(counterProvider);
For this:
final int data = (context.read(counterProvider) as int);
final int data2 = (watch(counterProvider) as int);
Or this:
final data = context.read(counterProvider);
final data2 = watch(counterProvider);
This is the final code (one version):
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateNotifierProvider((ref) => Counter());
class Counter extends StateNotifier<int> {
Counter() : super(3);
//String toString() => state.toString();
void increment() => state++;
void decrement() => state--;
}
void main() {
runApp(ProviderScope(
child: MyApp(),
));
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RiverPod Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RiverPod example'),
),
body: Container(
child: Center(
child: Consumer(builder: (context, watch, child) {
//Counter data = context.read(counterProvider.notifier);
//Counter data2 = watch(counterProvider.notifier);
final int data = (context.read(counterProvider) as int);
final int data2 = (watch(counterProvider) as int);
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(data.toString()),
Text(data2.toString()),
SizedBox(
height: 10,
),
FloatingActionButton(
onPressed: () {
context.read(counterProvider.notifier).increment();
watch(counterProvider.notifier).increment();
print(data.toString());
},
child: const Icon(Icons.add),
)
],
);
}),
),
),
);
}
}