Question 180963 in Flutter Question posted in
The official Flutter documentation can be found here.

The UI theme state is not updating until I resave the code while using flutter_riverpod stateprovider

I need to change the Theme using stateprovider of flutter riverpod ,I dont understand what i did wrong here

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

class MyApp extends ConsumerWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isDarkTheme = ref.watch(isDarkThemeProvider.notifier).state;

    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: ScreenUtilInit(
        designSize: const Size(360, 690),
        minTextAdapt: true,
        splitScreenMode: true,
        builder: (context, child) {
          return MaterialApp(
              builder: FToastBuilder(),
              debugShowCheckedModeBanner: false,
              title: 'code',
              theme: isDarkTheme ? Themes().darkTheme : Themes().lightTheme,
              onGenerateRoute: onAppGenerateRoute(),
              routes: appRoutes(),
              initialRoute: SplashPage.route);
        },
      ),
    );
  }
}

this is my theme class and theme stateprovider

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:tr_qr_code/utils/colors.dart';

class Themes {
  final ThemeData lightTheme = ThemeData(
    scaffoldBackgroundColor: colorWhite,
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    appBarTheme: const AppBarTheme(color: colorWhite),
    fontFamily: 'OpenSans',
    useMaterial3: true,
  );

  final ThemeData darkTheme = ThemeData(
    scaffoldBackgroundColor: colorBlack,
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    appBarTheme: const AppBarTheme(color: colorBlack),
    fontFamily: 'OpenSans',
    useMaterial3: true,
  );
}

final isDarkThemeProvider = StateProvider<bool>((ref) => false);

on the toggle switch inside the onTap the below code is used to update the state

onTap: () {
    
              ref.read(isDarkThemeProvider.notifier).update(
                  (state) => !ref.read(isDarkThemeProvider.notifier).state);
            },

i tried flutter clean, flutter pub upgrade etc ..

Tags:

2

Answers


  1. 0

    Inside of MyApp class it should be
    final isDarkTheme = ref.watch(isDarkThemeProvider);

    And alternatively, inside your onTap you can toggle value like this:

    onTap: () {
                ref
                    .read(isDarkThemeProvider.notifier)
                    .update((state) => !state);
          },
    Login or Signup to reply.
  2. 0

    Your mistake is that you use notifier in the build method. Just replace the line and everything will work:

    Widget build(BuildContext context, WidgetRef ref) {
-    final isDarkTheme = ref.watch(isDarkThemeProvider.notifier).state;
+    final isDarkTheme = ref.watch(isDarkThemeProvider);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search