Strange behaviour with Navigator.push and watch above MaterialApp

[a14n]

Hi,

With flutter_riverpod-1.0.0-dev.10 I face a strange behaviour on the following code. Basically as soon as a route is pushed the value of the state above the MaterialApp is not updated anymore. Am I using riverpod in a wrong way or is it a bug?

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var value = ref.watch(myState).state;
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyView(value),
    );
  }
}

class MyView extends ConsumerWidget {
  const MyView(this.value, {Key? key}) : super(key: key);
  final int value;
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var value2 = ref.read(myState).state;
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$value / $value2'),
            TextButton(
              onPressed: () => ref.read(myState.notifier).state++,
              child: const Text('Increment'),
            ),
            TextButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => MyView(value),
                ),
              ),
              child: const Text('Push route'),
            ),
          ],
        ),
      ),
    );
  }
}

When the app is loaded every tap on "Increment" will increment the 2 displayed values until "Push route" is tapped. Then only the second value (retrieved from ref.read(myState)) is updated.

[TimWhiting]

You should be using ref.watch(myState).state in your build method on MyView.

What is happening is that the watch in MyApp is causing the MyView to get rebuilt every time the state changes because it is watching the state, which creates a new home every time. Since you are on the home route, the home route gets rebuilt and the new value gets read.

When you then go to a different route, MyApp then rebuilds whenever the state changes, and updates what the home route's value should be, but you are on a different route, so you don't have the updated value passed in, and MyView doesn't rebuild since it is not watching the myState value.

If you do ref.watch in the MyView widget it will update anytime the myState updates.

[a14n]

Using ref.watch(myState).state in the build method of MyView doesn't change anything. The same behaviour occurs.

[TimWhiting]

Yes the value2 will update as it should (I'm confused why it did with read before), but since you are pushing a MaterialPageRoute with the value as it was at that point value1 should not update. Rebuilding the home route with one parameter in material app should not rebuild a separate route that had a different parameter.

home corresponds to the route path /
your new route does not have that path it is a transient route above the home route

So when you rebuild MyApp and pass a new value1 to the route, you are changing the home route and not the pushed route. Does that make sense?

[TimWhiting]

onPressed: () => Navigator.push(
                context,
                MaterialPageRoute( /// This is not your home route! 
                      // value1 is going to be the value of value at this point forever. 
                  builder: (context) => MyView(value),
                ),
              ),

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyView(value), /// Value 1 is assigned the new value (but only for your home route) not any other route
    );

[a14n]

Thanks for your help! I now understand better what's happen in the real app I try to debug.

[rrousselGit]

Hello!

This isn't related to Riverpod and is instead an edg-case with Navigator.push / showDialog.

When you do:

Navigator.push(SomeWidget(value))

then SomeWidget will never be reconstructed with a different value since it isn't constructed within a build method but rather on button tap.

You may want to use Navigator 2 instead, which, with its declarative syntax, would correctly pass the new parameter to the route:

Navigator(
  pages: [
    if (something)
      MyView(value), // correctly updates MyView when "value" changes
  ]
)

[rrousselGit]

Alternatively you could use Consumer like so:

Navigator.push<void>(
  context,
  MaterialPageRoute(
    builder: (context) {
      return Consumer(
        builder: (context, ref, _) {
          final value = ref.watch(myState).state;
          return MyView(value);
        },
      );
    },
  ),
)

[a14n]

Thanks for your help and for this great package!