2.0.0-dev.6 and ThemeData not updating UI

[MitchWenceInfocorp]

I want to move the ThemeData via riverpod and it is not working. Not sure If I am doing something wrong, riverpod shouldn't be used for this or a bug. This is in Flutter 3. Here is what I am doing:

main.dart

late ThemeData themeData = ThemeData(
  colorSchemeSeed: Colors.blue,
  useMaterial3: true,
  brightness: Brightness.light,
);
final themeDataProvider = StateProvider((ref) => themeData);
//Code remove
class _MyAppState extends ConsumerState<MyApp> {
  @override
  Widget build(BuildContext context) {
    final _appRouter = AppRouter();
    return MaterialApp.router(
      title: 'My App',
      theme: themeData,
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
    );
  }
}

Note I am also using auto_route
This correctly loads the theme. Then in another widget, there is a button and in the onPress

ref
  .read(themeDataProvider.notifier)
  .update((state) => ThemeData(
        colorSchemeSeed: Colors.amber,
        useMaterial3: true,
        brightness: Brightness.dark,
      ));

I can see in print statements that the Brightness.dark is set however the app doesn't change.

[mchakroun]

It seems to me that you are not watching the themeDataProvider

[MitchWenceInfocorp]

Yes, that is an issue. However, now that it is watching it I need to run a setState(() {}); to actually update the UI. If I put a button inside the MaterialApp in maint.dart that has an onPress of setState(() {}); it then updates.

[GitGud31]

Could you try this and let me know if it works?

//Remove the setState() and use ref.watch(themeDataProvider)

//Code remove
class _MyAppState extends ConsumerState<MyApp> {
  @override
  Widget build(BuildContext context) {
    ref.watch(themeDataProvider); //the widget becomes reactive and rebuild itself when the provider value changes.

    final _appRouter = AppRouter();
    return MaterialApp.router(
      title: 'My App',
      theme: themeData,
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
    );
  }
}

[rrousselGit]

You should instead do:

final themeDataProvider = StateProvider((ref) =>ThemeData(<your theme here>));

class _MyAppState extends ConsumerState<MyApp> {
  @override
  Widget build(BuildContext context) {
    final themeData = ref.watch(themeDataProvider);

    return MaterialApp.router(
      title: 'My App',
      theme: themeData,
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
    );
  }
}