Can't rebuild MaterialApp using riverpod generator

[binaerverkehr]

Hello,

I am struggling with a seemingly simple functionality. I want to implement a themeMode switch to switch between light and dark mode.

If I use the conventional ChangeNotifierProvider for this, everything works perfectly, but my question is how I could make this work with a GENERATED provider. Whenever I use a generated one, the UI does not update anymore.

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

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

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appTheme = ref.watch(appThemeProvider);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Light/Dark Mode',
      // Light Theme
      theme: ThemeData(
        primarySwatch: Colors.blue,
......
        ),
        textTheme: const TextTheme(
          headlineMedium: TextStyle(fontSize: 36.0, fontWeight: FontWeight.bold),
        ),
      ),
      // Dark Theme
      darkTheme: ThemeData(
        primarySwatch: Colors.blue,
........
        ),
        textTheme: const TextTheme(
          headlineMedium: TextStyle(fontSize: 36.0, fontWeight: FontWeight.bold),
        ),
      ),
      themeMode: appTheme.isDarkMode ? ThemeMode.dark : ThemeMode.light,

      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appTheme = ref.watch(appThemeProvider);

    return Scaffold(
      body: Center(
        child: Switch(
          value: appTheme.isDarkMode,
          onChanged: (newValue) {
            appTheme.toggleTheme();
          },
        ),
      ),
    );
  }
}

class AppThemeState extends ChangeNotifier {
  bool isDarkMode = false;

  void toggleTheme() {
    isDarkMode = !isDarkMode;
    notifyListeners();
  }
}

final appThemeProvider = ChangeNotifierProvider<AppThemeState>((ref) {
  return AppThemeState();
});

[gdurandrexel]

If you want to mutate the state of a provider, you must put the mutating methods inside the provider and update the provider's state inside them.
You can call these methods via the provider's notifier (which you must read).

If you are using VS Code and Riverpod snippets, this is the one called riverpodClass. This will generate a provider called appThemeProvider (name of the class+Provider).

@riverpod
class AppTheme extends _$AppTheme {
  @override
  bool build() { // bool is the type of the value this provider provides (can be any type)
    return false; // this is your initial state
  }

  void toggleTheme() {
    state = !state; // here you set the state of the provider with whatever value you want
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isDarkMode = ref.watch(appThemeProvider);

    return Scaffold(
      body: Center(
        child: Switch(
          value: isDarkMode,
          onChanged: (newValue) {
            ref.read(appThemeProvider.notifier).toggleTheme();
          },
        ),
      ),
    );
  }
}

BTW the naming of the provider suggests it provides a ThemeMode. With the implementation above, a more accurate class name would be IsDarkMode.

[binaerverkehr]

Thank you very much! It works perfectly.

import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'dark_mode_provider.g.dart';

@riverpod
class DarkMode extends _$DarkMode {
  @override
  bool build() {
    return false;
  }

  void toggle() {
    state = !state;
  }
}

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

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

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isDarkMode = ref.watch(darkModeProvider);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Light/Dark Mode',
      // Light Theme
      theme: ThemeData(
       ....
        ),
        textTheme: const TextTheme(
          headlineMedium: TextStyle(fontSize: 36.0, fontWeight: FontWeight.bold),
        ),
      ),
      // Dark Theme
      darkTheme: ThemeData(
      ....
        ),
        textTheme: const TextTheme(
          headlineMedium: TextStyle(fontSize: 36.0, fontWeight: FontWeight.bold),
        ),
      ),
      themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,

      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isDarkMode = ref.watch(darkModeProvider);

    return Scaffold(
      body: Center(
        child: Switch(
          value: isDarkMode,
          onChanged: (newValue) {
            ref.read(darkModeProvider.notifier).toggle();
          },
        ),
      ),
    );
  }
}

[binaerverkehr]

I have one more question. How would this look like with a more complex class like this:

I cannot generate it, because I have no default constructor.

class SettingsController extends ChangeNotifier {
  final GetSettings _getSettings;
  final UpdateSettings _updateSettings;

  SettingsController(
    this._getSettings,
    this._updateSettings,
  );

  SettingsEntity getSettings() {
    return _getSettings.call();
  }

  void updateSettings(SettingsEntity settings) {
    _updateSettings.call(settings);
    notifyListeners();
  }
}

final settingsControllerProvider = ChangeNotifierProvider<SettingsController>((ref) {
  final settingsRepository = ref.watch(settingsRepositoryProvider);

  final getSettings = GetSettings(settingsRepository);
  final updateSettings = UpdateSettings(settingsRepository);

  return SettingsController(
    getSettings,
    updateSettings,
  );
});

GetSettings and UpdateSettings are UseCase classes which call the repositories.

[gdurandrexel]

First define what type your provider provides: here it seems it's SettingsEntity. Then create a riverpodClass that builds an instance of this type. Then create the methods that mutate the state, i.e. the value that this provider provides.

@riverpod
class SettingsController extends _$SettingsController {
  @override
  SettingsEntity build() {
    final settingsRepository = ref.watch(settingsRepositoryProvider);
   
    return GetSettings(settingsRepository).call();
  }

  void updateSettings(SettingsEntity settings) {
    final settingsRepository = ref.read(settingsRepositoryProvider);
    UpdateSettings(settingsRepository).call();

    state = settings; // you can also replace this with ref.invalidateSelf()
  }
}

The suffix Controller, though usual for a provider that allows to mutate its state, is a bit misleading: the generated settingsControllerProvider does not provide a controller when you watch/read it, but the value it builds. To access the "controller" part of this provider you must use its notifier, i.e. ref.read(settingsControllerProvider.notifier).

Note that you watch settingsRepositoryProvider in build, and read elsewhere.
It's not needed to watch if the state of settingsRepositoryProvider never changes, but it does not hurt, and this may change some time.

[binaerverkehr]

Thank you for your quick response! I have implemented everything as you explained, but now the UI does not update itself when calling the updateSettings method (i have to manually hot reload).

I've created the exact same provider:

@riverpod
class AppSettings extends _$AppSettings {
  @override
  SettingsEntity build() {
    final settingsRepo = ref.watch(settingsRepositoryProvider);

    return GetSettings(settingsRepo).call();
  }

  void updateSettings(SettingsEntity settings) {
    final settingsRepository = ref.read(settingsRepositoryProvider);
    UpdateSettings(settingsRepository).call(settings); // I pass the settings here to save it in the db
    state = settings;
  }
}

And here is the UI part for updating the settings (again switching between light and dark mode).

class SettingsPage extends ConsumerWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appSettings = ref.watch(appSettingsProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 24.0),
          child: Column(
            children: [
              const Text(
                'Light / dark mode',
              ),
              // Dark mode toggle
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  const Icon(Icons.light_mode),
                  Switch(
                    value: appSettings.isDarkMode,
                    onChanged: (value) {
                      final currentSettings = appSettings;
                      // Model
                      final settingsModel = SettingsModel.fromEntity(currentSettings);

                      final updatedSettingsModel = settingsModel.copyWith(isDarkMode: value);

                      debugPrint("updatedSettings: $settingsModel");

                      // Update
                      ref.read(appSettingsProvider.notifier).updateSettings(updatedSettingsModel);
                    },
                  ),
                  const Icon(Icons.dark_mode),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

When I press the switch widget it moves, but the UI only updates when manually hot reload.

[binaerverkehr]

Another thing I have just noticed: updateSettings is executed twice.

[gdurandrexel]

If you place a breakpoint inside the build of the widget, is it hit when you toggle the switch?
Note that the setter for state notifies the watchers only if the new value is not 'identical' to the current value (see doc.). But since you copyWith this should be OK.

As for the onChanged being called twice, I don't know. It does not seem normal to me, but I don't think it is linked to riverpod: whether this callback is called is internal logic from the Switch.

Also I don't understand why there is so much code in onChanged: ref.read(appSettingsProvider.notifier).updateSettings(appSettings.copyWith(isDarkMode: value)); should be enough.

I'm afraid you'll have to step debug. I do not see anything wrong in the code.

[binaerverkehr]

Many thanks for the tip.
It was a stupid mistake on my part. I had the exact same print command somewhere else, so it looked like the method had been executed twice.
And I forgot to change the provider in MaterialApp.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, child) {
        final appSettings = ref.watch(appSettingsProvider); // <----- THIS ONE

        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Flipcards App',
          theme: AppTheme.lightTheme,
          darkTheme: AppTheme.darkTheme,
          themeMode: appSettings.isDarkMode ? ThemeMode.dark : ThemeMode.light,
          home: const DeckListPage(),
        );
      },
    );
  }
}

Now everything works! Thank you so much. This has greatly enriched my understanding of Riverpod.

[binaerverkehr]

Oh, and there is so much code in the onChanged, because copyWith is only available for the model, not the entity. So my entity is a pure data class whereas my model (in the data layer) has some helper methods like copyWith. That's why I have to convert from entity to model first before I can make changes to an entity.

[gdurandrexel]

For easy copyWith() you can use this package https://pub.dev/packages/copy_with_extension_gen. That's one more code generator, but so useful.
And you've got https://pub.dev/packages/equatable for equality/hashCode with just a mixin.

[binaerverkehr]

Thank you. I currently use Freezed for value equality in the entity and all helper methods in the models as follows:

Entities

import 'package:flutter_lernkarten_app_test/src/features/decks/domain/entities/card_entity.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'deck_entity.freezed.dart';

@Freezed(fromJson: false, toJson: false, copyWith: false, equal: true)
class DeckEntity with _$DeckEntity {
  factory DeckEntity({
    required int id,
    required String name,
    required List<CardEntity> cards,
  }) = _DeckEntity;
}

import 'package:freezed_annotation/freezed_annotation.dart';

part 'card_entity.freezed.dart';

@Freezed(copyWith: false, equal: true)
class CardEntity with _$CardEntity {
  factory CardEntity({
    required int deckId,
    required String front,
    required String back,
  }) = _CardEntity;
}

Models (using Freezed + Isar DB)

@freezed
@Embedded(ignore: {'copyWith', 'toJson', 'fromJson', 'toEntity', 'fromEntity'})
class CardModel with _$CardModel implements CardEntity {
  factory CardModel({
    required int deckId,
    required String front,
    required String back,
  }) = _CardModel;

  // Private constructor
  const CardModel._();

  // fromEntity
  factory CardModel.fromEntity(CardEntity entity) {
    return CardModel(
      deckId: entity.deckId,
      front: entity.front,
      back: entity.back,
    );
  }

  // toEntity
  CardEntity toEntity() {
    return CardEntity(
      deckId: deckId,
      front: front,
      back: back,
    );
  }
}

@freezed
@Collection(ignore: {'copyWith', 'toJson', 'fromJson', 'toEntity', 'fromEntity'})
class DeckModel with _$DeckModel implements DeckEntity {
  factory DeckModel({
    required int id,
    required String name,
    required List<CardModel> cards,
  }) = _DeckModel;

  // Private constructor
  const DeckModel._();

  // fromEntity
  factory DeckModel.fromEntity(DeckEntity entity) {
    return DeckModel(
      id: entity.id,
      name: entity.name,
      cards: entity.cards.map((CardEntity e) => CardModel.fromEntity(e)).toList(),
    );
  }

  // toEntity
  DeckEntity toEntity() {
    return DeckEntity(
      id: id as int,
      name: name,
      cards: cards.map((e) => e.toEntity()).toList(),
    );
  }
}

I'm currently trying my hand at clean architecture.
Although I'm not sure if this is overkill or if I need a model at all, it works pretty well.