Boost Flutter App Speed: Deep Dive into Build, Layout, and Paint Optimizations

1. Flutter Performance Overview

1.1 Basic Rendering Principles

Before optimizing Flutter performance, understand its rendering pipeline. The UI thread builds Widget, Element, and RenderObject trees, traverses the RenderObject tree, marks dirty nodes, paints to create a Layer Tree, which is sent to the GPU thread that converts it to GPU commands.

1.2 Performance Debugging

Run flutter run --profile to launch the profiling tool. The UI thread timeline shows each rendering step duration, helping locate bottlenecks. For GPU thread analysis, use flutter run --profile --trace-skia and set Record Streams Profile to All to inspect Skia calls.

1.3 Why Flutter Is a High‑Performance Front‑End Framework

Flutter calls the Skia engine directly, unlike React Native which goes through a JavaScript bridge, reducing overhead and improving performance.

The UI thread rendering involves build, layout, and paint phases, which are detailed in the following sections.

2. Build Phase Optimization

2.1 Build Update Process

Element tree contains ComponentElement and RenderObjectElement. Widgets are immutable; updating a widget discards the old tree and creates a new one, then traverses the previous Element tree, updating or replacing nodes based on type.

If the Element is a ComponentElement, update StatefulElement/StatelessElement and run build.

If the Element is a RenderObjectElement, call updateRenderObject to set properties and possibly mark dirty.

2.2 Improving Build Efficiency

Key ideas: reduce the number of nodes traversed and terminate tree traversal early.

Enable debugProfileBuildsEnabled = true to see build bottlenecks in the timeline.

Best practices:

Keep build pure with no side effects.

Avoid deeply nested widgets; extract them into separate widgets to lower traversal start points.

2.3 Specific Optimizations

2.3.1 Reduce Starting Nodes

Example before optimization:

class BeginWidget extends StatefulWidget {
  BeginWidget({Key key}) : super(key: key);
  @override
  _beginWidgetState createState() => _beginWidgetState();
}

class _beginWidgetState extends State<BeginWidget> {
  int time = 60;
  @override
  void initState(){
    super.initState();
    if(mounted){
      setState(){
        time = time - 1;
      };
    }
  }
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: Container(child: Text('123'))),
        Expanded(
          child: Container(
            width: 100,
            height: 100,
            child:Row(
              children: [
                Text('倒计时'),
                Text('$time')
              ],
            ),
            decoration: BoxDecoration(color: Colors.blue),
          )
        )
      ],
    );
  }
}

Optimized version splits the timer widget into a separate StatelessWidget and a dedicated TimeWidget, reducing traversal depth.

class AfterWidget extends StatelessWidget {
  const AfterWidget({Key key}) : super(key: key);
  Widget build(BuildContext context){
    return Column(
      children: [
        Expanded(child: Container(child: Text('123'))),
        Expanded(
          child: Container(
            width: 100,
            height: 100,
            child:Row(
              children: [
                Text('倒计时'),
                TimeWidget(),
              ],
            ),
            decoration: BoxDecoration(color: Colors.blue),
          )
        )
      ],
    );
  }
}

class TimeWidget extends StatefulWidget {
  TimeWidget({Key key}) : super(key: key);
  @override
  _timeWidgetState createState() => _timeWidgetState();
}

class _timeWidgetState extends State<TimeWidget> {
  int time = 60;
  @override
  void initState(){
    super.initState();
    if(mounted){
      setState(){
        time = time - 1;
      };
    }
  }
  Widget build(BuildContext context) {
    return Text('$time');
  }
}

Fine‑grained widget extraction improves readability and prevents unnecessary rebuilds.

2.3.2 Early Termination of Sub‑tree Traversal

Selector(
  selector: (context, DataModel dataModel) {
    return dataModel.xxx;
  },
  builder: (context, xxx, child) {
    return Container(
      child: Row(
        Text(xxx),
        child,
      ),
    );
  },
  child: Container(child: Text('123')),
)

Using Provider’s Selector with a child parameter stops traversal of the child subtree, allowing reuse and reducing work.

3. Layout Phase Optimization

3.1 Layout Process

Layout calculates actual widget sizes. A RelayoutBoundary limits recomputation to affected subtrees. Providing explicit widget dimensions (e.g., itemExtent for ListView) avoids costly size calculations.

3.2 Code Example

class ListViewShow extends StatelessWidget {
  const ListViewShow({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      itemExtent: 30, // specify each child's height
      children: <Widget>[
        Container(child: Text('ListView 1')),
        Container(child: Text('ListView 2')),
        Container(child: Text('ListView 3')),
      ],
    );
  }
}

4. Paint Phase Optimization

4.1 Paint Process

After a RenderObject is marked dirty, paint redraws it. A RepaintBoundary creates a boundary to prevent large‑scale repaints. Enable debugProfilePaintsEnabled = true to view paint activity.

4.2 Code Example

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

class HoursTitle extends StatefulWidget {
  @override
  HoursTitleState createState() => HoursTitleState();
}

class HoursTitleState extends State<HoursTitle> {
  static Timer timer;
  int minutes = DateTime.now().minute;
  int seconds = DateTime.now().second;
  Duration duration = Duration(seconds: 1);

  void _startTimer() {
    timer?.cancel();
    timer = Timer.periodic(duration, (timer) {
      if (seconds == 0) {
        if (minutes == 0) {
          minutes = 59;
          seconds = 59;
        } else {
          minutes--;
          seconds = 59;
        }
      } else {
        seconds--;
      }
      setState(() {
        minutes = minutes;
        seconds = seconds;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    if (!mounted) return;
    _startTimer();
  }

  @override
  void dispose() {
    super.dispose();
    timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          RepaintBoundary(
            child: Container(
              width: 200,
              height: 30,
              child: Text.rich(
                TextSpan(
                  text: 'Time left this hour',
                  children: [
                    TextSpan(text: '$minutes : $seconds'),
                  ],
                ),
              ),
            ),
          ),
          Text('123'),
          Text('465'),
        ],
      ),
    );
  }
}

The RepaintBoundary ensures only the timer widget repaints, not surrounding widgets.

Conclusion

Flutter performance optimization spans rendering, widget structuring, and component choices. Use ListView vs ListView.builder wisely, limit Opacity usage because it triggers saveLayer(), and apply the techniques above to achieve smoother, higher‑performance apps. Future articles will cover more topics.