Learn Rebuilding Widgets Efficiently | Lifting State and Widget Communication

Understanding how and when widgets rebuild is crucial for building efficient Flutter apps. Widget rebuilds occur when the framework determines that a widget's configuration has changed and needs to update its appearance. This usually happens due to state changes, such as calling setState(), or when parent widgets rebuild and pass new data down the tree. While Flutter's rendering engine is optimized for performance, excessive or unnecessary rebuilds can still slow down your app and lead to janky user experiences.

When a widget rebuilds, all of its child widgets may also rebuild, depending on how the widget tree is structured. This can lead to performance issues, especially in large widget trees or when rebuilding expensive widgets that do not actually need to update. Therefore, minimizing unnecessary rebuilds is a key strategy in Flutter state management.

main.dart


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

void main() {
  runApp(const MaterialApp(home: RebuildDemo()));
}

class RebuildDemo extends StatefulWidget {
  const RebuildDemo({Key? key}) : super(key: key);

  @override
  State<RebuildDemo> createState() => _RebuildDemoState();
}

class _RebuildDemoState extends State<RebuildDemo> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Rebuild Demo')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Approach 1: Causes unnecessary rebuilds
          const ExpensiveWidget(),
          const SizedBox(height: 20),
          // Approach 2: Optimized, avoids rebuilds
          const OptimizedExpensiveWidget(),
          const SizedBox(height: 40),
          Text('Counter: $counter'),
          ElevatedButton(
            onPressed: () {
              setState(() {
                counter++;
              });
            },
            child: const Text('Increment Counter'),
          ),
        ],
      ),
    );
  }
}

// This widget is rebuilt every time the parent rebuilds, even if it doesn't need to.
class ExpensiveWidget extends StatelessWidget {
  const ExpensiveWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('ExpensiveWidget rebuilt');
    return Container(
      padding: const EdgeInsets.all(16),
      color: Colors.redAccent,
      child: const Text('I am expensive (unoptimized)'),
    );
  }
}

// This widget uses const constructor, so it does not rebuild unnecessarily.
class OptimizedExpensiveWidget extends StatelessWidget {
  const OptimizedExpensiveWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('OptimizedExpensiveWidget rebuilt');
    return Container(
      padding: const EdgeInsets.all(16),
      color: Colors.greenAccent,
      child: const Text('I am optimized (const widget)'),
    );
  }
}

In the example above, you see two approaches for including an expensive widget in your widget tree. The first, ExpensiveWidget, is a regular StatelessWidget that is rebuilt every time its parent (RebuildDemo) rebuilds—even if its own data has not changed. This is evident from the print statement inside its build method, which logs every time the widget is rebuilt.

The second approach, OptimizedExpensiveWidget, takes advantage of the const constructor. When you use const widgets, Flutter can optimize and avoid rebuilding them if their configuration has not changed. As a result, OptimizedExpensiveWidget does not rebuild unnecessarily, even when its parent does. This technique is especially effective for widgets that are expensive to build and whose content is static.

To further prevent excessive rebuilds, you can:

Use const constructors whenever possible;
Extract widgets that do not depend on changing state into their own classes;
Use keys to help Flutter differentiate widgets and keep their state;
Minimize the scope of setState() to only the widgets that need to update.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Swipe to show menu

main.dart


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

void main() {
  runApp(const MaterialApp(home: RebuildDemo()));
}

class RebuildDemo extends StatefulWidget {
  const RebuildDemo({Key? key}) : super(key: key);

  @override
  State<RebuildDemo> createState() => _RebuildDemoState();
}

class _RebuildDemoState extends State<RebuildDemo> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Rebuild Demo')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Approach 1: Causes unnecessary rebuilds
          const ExpensiveWidget(),
          const SizedBox(height: 20),
          // Approach 2: Optimized, avoids rebuilds
          const OptimizedExpensiveWidget(),
          const SizedBox(height: 40),
          Text('Counter: $counter'),
          ElevatedButton(
            onPressed: () {
              setState(() {
                counter++;
              });
            },
            child: const Text('Increment Counter'),
          ),
        ],
      ),
    );
  }
}

// This widget is rebuilt every time the parent rebuilds, even if it doesn't need to.
class ExpensiveWidget extends StatelessWidget {
  const ExpensiveWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('ExpensiveWidget rebuilt');
    return Container(
      padding: const EdgeInsets.all(16),
      color: Colors.redAccent,
      child: const Text('I am expensive (unoptimized)'),
    );
  }
}

// This widget uses const constructor, so it does not rebuild unnecessarily.
class OptimizedExpensiveWidget extends StatelessWidget {
  const OptimizedExpensiveWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('OptimizedExpensiveWidget rebuilt');
    return Container(
      padding: const EdgeInsets.all(16),
      color: Colors.greenAccent,
      child: const Text('I am optimized (const widget)'),
    );
  }
}

To further prevent excessive rebuilds, you can:

Use const constructors whenever possible;
Extract widgets that do not depend on changing state into their own classes;
Use keys to help Flutter differentiate widgets and keep their state;
Minimize the scope of setState() to only the widgets that need to update.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 4