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

Flutter – Does Bloc Rebuild (BlocBuilder) The Whole Widget Tree When New State emitted?

I encountered an issue when I wrapped my MaterialApp widget in a BlocBuilder. I expected the entire widget tree to rebuild whenever a new state was emitted. However, I noticed that some widgets didn’t rebuild as expected.

Here’s a simplified example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MyCubit, MyState>(
      builder: (context, state) {
        return MaterialApp(
          theme: state.isDarkMode ? ThemeData.dark() : ThemeData.light(),
          home: const MyHomePage(),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: const Center(child: Text('Hello, world!')),
    );
  }
}

In this setup:

  • When the isDarkMode state changes, the MaterialApp rebuilds with the new theme.
  • However, MyHomePage and its child widgets (e.g., Text('Hello, world!')) don’t rebuild, even though I expected the whole tree to respond to the state change.

What I Tried

To solve the problem, I wrapped the specific widgets that didn’t rebuild (e.g., MyHomePage) in another BlocBuilder, like this:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MyCubit, MyState>(
      builder: (context, state) {
        return Scaffold(
          appBar: AppBar(title: Text(state.isDarkMode ? 'Dark Mode' : 'Light Mode')),
          body: Center(child: Text(state.isDarkMode ? 'Dark Mode On' : 'Light Mode On')),
        );
      },
    );
  }
}

This approach worked, but now I’m wondering:

  1. Is the reason some widgets didn’t rebuild initially because they were marked as const?
  2. Or is it because BlocBuilder only rebuilds its immediate children, and deeper widgets are unaffected?
  3. Is wrapping widgets in multiple BlocBuilders the best practice, or is there a better way to handle this?

I’d appreciate insights or recommendations!

Tags:

2

Answers


  1. 0

    Whatever is below BlocBuilder will be rebuild. Solution:: Wrap whatever items requires rebuild with BlocBuilder. There can be more than one BlocBuilder in the same widget tree.

    Also you can can control rebuild using buildWhen parameter in blocbuilder

    Login or Signup to reply.
  2. 0
    1. Is the reason some widgets didn’t rebuild initially because they were marked as const?

    No, marking widgets as const does not prevent them from rebuilding when inherited widgets they depend on (like Theme or MediaQuery) change. In Flutter, const widgets can still rebuild if they rely on inherited widgets that update.

    1. Or is it because BlocBuilder only rebuilds its immediate children, and deeper widgets are unaffected?

    Not exactly. While BlocBuilder rebuilds its immediate child when the state changes, deeper widgets will only rebuild if they depend on the changing state or inherited widgets. If those widgets don’t reference the updated state or inherited data, they won’t reflect any changes. So, the key is ensuring your widgets are correctly linked to the state or inherited widgets to trigger a rebuild when needed.

    1. Is wrapping widgets in multiple BlocBuilders the best practice, or is there a better way to handle this?

    Not necessarily the best practice. Instead of wrapping widgets in additional BlocBuilders, ensure your widgets properly depend on the Theme by using Theme.of(context) or theme-dependent styles. This way, they will automatically rebuild and reflect changes when the theme updates, without the need for extra BlocBuilders.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search