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!

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!

• flutter
• bloc
• flutter-bloc
• cubit

Share Improve this question Follow asked Nov 19, 2024 at 15:52 DOT NET OLD DEVDOT NET OLD DEV 3911 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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