Flutter drawer closes on theme change. How can I prevent this?

Question

I am toggling application theme inside Scaffold drawer. Whenever I switch themes drawer immediately closes. Is there any way to keep drawer form closing on parent rebuild due to theme change?

 return Drawer(
      child: ListView(
        // Important: Remove any padding from the ListView.
        padding: EdgeInsets.zero,
        children: <Widget>[
          const DrawerHeader(
            decoration: BoxDecoration(color: Color(0x4D4971FF)),
            //https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
            child: Text(
              'Header',
              style: style,
            ),
          ),
          ListTile(
            leading: const Icon(Icons.brush),
            title: const Text(
              'Dark Mode',
              style: style,
            ),
            trailing: Switch(
              value: context.read<ThemeModeCubit>().state == ThemeMode.dark,
              onChanged: (value) {
                context.read<ThemeModeCubit>().toggleBrightness();
              },
            ),
          ),
       ]
      ),
   );

Here is the Builder that uses Cubit. StackOverflow says

It looks like your post is mostly code; please add some more details.

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthenticationBloc, AuthenticationState>(
        builder: (context, authState) {
          final _router = AppRouter(
            status: authState.status,
            initialMessage: null,
          ).router;
          return MaterialApp.router(
            
            themeMode: context.watch<ThemeModeCubit>().state,
            debugShowCheckedModeBanner: false,
            routerConfig: _router,
          );
        },
     
    );
  }
}

Here is the Cubit

class ThemeModeCubit extends HydratedCubit<ThemeMode> {
  ThemeModeCubit() : super(ThemeMode.system);

  void toggleBrightness() {
    emit(state == ThemeMode.light ? ThemeMode.dark : ThemeMode.light);
  }

  @override
  ThemeMode? fromJson(Map<String, dynamic> json) {
    return ThemeMode.values[json['themeMode'] as int];
  }

  @override
  Map<String, dynamic>? toJson(ThemeMode state) {
    return <String, int>{'themeMode': state.index};
  }
}

UPDATE

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

  @override
  Widget build(BuildContext context) {
    final _router = AppRouter(
      status: context.watch<AuthenticationBloc>().state.status,
      initialMessage: null,
    ).router;
    return MaterialApp.router(
        theme: AppTheme.of(context).light(),
        darkTheme: AppTheme.of(context).dark(),
        themeMode: context.watch<ThemeModeCubit>().state,
        debugShowCheckedModeBanner: false,
        routerConfig: _router,
      );
   
  
  }
}

Could you please produce reproducible code on ThemeModeCubit and Dart/Light Theme in your app — krishnaacharyaa, Jan 05 '23 at 07:19
Remove your `BlocBuilder` and use `BlocProvider` to provide the bloc, see my edited answer for more info — krishnaacharyaa, Jan 05 '23 at 08:25

krishnaacharyaa · Accepted Answer · 2023-01-05T08:24:56.347

You are facing this because BlocBuilder builds every time the state changes, the moment you change the state to light the state is changed , the whole Widget under the BlocBuilder is rebuild.

What is the best way to handle this ?

To use buildWhen prop of the BlocBuilder. Here try specifying your condition and exclude the condition where your state changes from light to dark or vice-versa

Code Structure:

BlocBuilder<BlocA, BlocAState>(
  buildWhen: (previous, current) {
    // return true/false to determine whether or not
    // to rebuild the widget with state
  },
  builder: (context, state) {
    // return widget here based on BlocA's state
  }
)

Alternatively

Remove the BlocBuilder as a whole as you are changing just the state to toggle colorTheme. Drawer's scope should be outside the scope of BlocBuilder if you are not using buildWhen to prevent drawer from re-rendering

Suggestions

Foremost, your Code architecture needs fine tuning because BlocBuilder is introduced to build only the required widget at time of neccessary.
Wrapping the whole MaterialApp inside BlocBuilder is heavily discouraged. And it shouldn't be used at all. Because for every state change, your complete app is rebuilding.

BlocBuilder<AuthenticationBloc, AuthenticationState>(
        builder: (context, authState) {
          final _router = AppRouter(
            status: authState.status,
            initialMessage: null,
          ).router;
          return MaterialApp.router(                         //❗ Highly Dicouraged
            themeMode: context.watch<ThemeModeCubit>().state,       
            routerConfig: _router,
          );
        },
     
    );

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => AuthenticationBloc(),   Just Create your Bloc here
      ),
    );
  }
}

Try to use MultiBlocProvider instead of nesting BlocProvider.

I tried buildWhen method. Drawer still closes on theme change. — Soliev, Jan 05 '23 at 07:45
Remove your MaterialApp wrapped inside the BlocBuilder.And find my edited post. Hope it gives you picture of bloc architecture. — krishnaacharyaa, Jan 05 '23 at 07:49
Yes I am using `MultiBlocProvider`. I removed `BlocBuuilder` instead I am using `themeMode: context.watch().state,` inside `MaterialApp`. — Soliev, Jan 05 '23 at 07:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/250860/discussion-between-krishna-acharya-and-soliev). — krishnaacharyaa, Jan 05 '23 at 08:20
Can you explain why creating blocs outside `MaterialApp` is discouraged? — Soliev, Jan 05 '23 at 08:28
You should create your bloc , more precisely provide your bloc on top of MaterialApp , I stated dont wrap your materialApp inside your BlocBuilder because it changes the build of entire app whenever the dependencies change — krishnaacharyaa, Jan 05 '23 at 08:31

Aakash Kumar · Answer 2 · 2023-01-05T07:57:55.603

Normally this doesn't suppose to do that. As Flutter only rerender the widget which are connected to changed value. Are you sure you are using the BlocBuilder in the right place?

Also check that in either BlocBuilder or inside the toggleBrightness method of the Cubit you are not updating any other state or value which is updating something else.

This can also happen if you are using BlocListener and setting some value inside the listen method of it like..

BlocListener<BlocA, BlocAState>(
  bloc: blocA,
  listener: (context, state) {
    // Check if you are updating some value inside this.
  }
)

You can test my sample code from this url https://dartpad.dev/?id=c79010cc6c1f27b0c1846191603e4dc9 and check if you have implemented the basic structure like this.

If this not solve your problem then you might have to update your question with more code sample & detail.

Updated after code

Here you are changing the widgets when changing theme but inside that another builder for auth is creating a new router.

 return BlocBuilder<ThemeModeCubit, ThemeMode>(
      builder: (context, themeMode) {
        return AppTheme(
          child: BlocBuilder<AuthenticationBloc, AuthenticationState>(
            builder: (context, authState) {
              final _router = AppRouter(
                status: authState.status,
                initialMessage: null,
              ).router;
              return MaterialApp.router(
                theme: AppTheme.of(context).light(),
                darkTheme: AppTheme.of(context).dark(),
                themeMode: themeMode,
                debugShowCheckedModeBanner: false,
                routerConfig: _router,
              );
            },
          ),
        );
      },
    );

Try switching it like this.

 return BlocBuilder<AuthenticationBloc, AuthenticationState>(
      builder: (context, themeMode) {
        final _router = AppRouter(
        status: authState.status,
           initialMessage: null,
        ).router;
        return AppTheme(
          child: BlocBuilder<ThemeModeCubit, ThemeMode>(
            builder: (context, authState) {
              return MaterialApp.router(
                theme: AppTheme.of(context).light(),
                darkTheme: AppTheme.of(context).dark(),
                themeMode: themeMode,
                debugShowCheckedModeBanner: false,
                routerConfig: _router,
              );
            },
          ),
        );
      },
    );

I see your demo and its working as expected. I don't have any other state except `themeMode` inside my cubit. I have no idea why it is not working in my case. — Soliev, Jan 05 '23 at 07:50