Optimising Performance in Flutter | 3 Things I’ve Learnt

Flutter is a very powerful framework for building high performance cross-platform applications. However, as with any language, framework or software tool, there are techniques or best practices that we can use to optimise the performance and get the most out of the application.

Image Source

So here are three things to improve the performance of a Flutter application that I have picked up so far!

Use Const Keywords

In Flutter, we use the const keyword to declare variables and widgets whose values remain unchanged over time. That is, once they have been initialised, they can’t be changed — immutable. Using these keywords improves performance in the following ways:

• Widget rebuilds: In Flutter, widgets are rebuilt every time their state changes. Therefore, when we use const widgets, there is no need to rebuild them as they remain unchanged through out. Rebuilding widgets impacts application performance.
• Object allocation: When we use const keywords we prevent unnecessary object allocation. This is because when the objects are created, they are allocated memory only once and reused whenever they are referenced again in the application. This optimises memory usage which improves performance.

Use ListView.builder instead of ListView

So, what is the difference between ListView.builder and ListView? The main difference between these two widgets is how the items are created. With ListView, all the items are created at once while with ListView.builder, the items are created as the view is scrolled (as needed).

Thus, when dealing with long lists, using ListView is not advisable because all the items will be created at once even if the user doesn’t need them. Instead, use the ListView.builder widget when working with large lists so that items will be rendered dynamically as the user scrolls down the list.

Lazy loading is also a technique that can be used within the ListView.builder to load only the necessary items as the user scrolls.

body: ListView.builder(
  itemCount: _items.length,
  itemBuilder: (BuildContext context, int index) {
    if (index == _items.length - 1) { // If the user is at the last item in the list
      _loadMore(); // show more list items
    } else { // show list
      return ListTile(
        title: Text(_items[index]),
      );
    }
  },
),

void _loadMore() {
  setState(() { // rebuild the listview with additional data
    _items.addAll(...);
  });
}

Minimise use of setState()

In Flutter, setState() is a method that is used to update the state of a widget. When a user is interacting with the application, their actions could require the app state to change — this is where the setState method will be called. When it is called, Flutter schedules a rebuild of the widget tree and creates new instances of the widgets that have changed in order to update the user interface based on the new state.

However, as much as calling this method might be necessary, it is important to minimise its usage to ensure optimal performance of your Flutter application. This is because of the constant widget rebuild (refer to point #1). For managing state, it is better to consider other state management techniques such as Provider or BLoC.

Performance is one of the key metrics that greatly impact a user’s experience in an application. It can literally make or break your product especially if it is targeted at a large audience. So, as you are developing your application, keep this in mind. I came across this article on how to test your app’s performance. See link below.

Performance testing of Flutter app

Other than these three techniques discussed above, there are numerous other ways to improve your applications performance e.g., reducing animations, optimising images etc. So make sure you are implementing them as much as you can.

“Optimising performance is like playing Tetris: there’s always one more piece you can fit in.”
— Unknown

Happy April and thank you for reading ❤

The container widget:
Check out a past article on “3 Things I’ve learnt”

The Container Widget | 3 Things I’ve Learnt