Flutter and Performance Optimisation

 

Flutter - Performance Optimisation

Hello everyone. In this blog post, I would like to talk about some basic techniques and tips that we can use to make our Flutter apps faster and smoother. I am about to publish my second app on GooglePlay and in this process, I realised that I have to think about performance more than I think about visuals, design, UI elements. Because no matter how stylish your app looks, it is not possible for the user experience to be positive if there are performance problems. That’s why I researched this topic and listed below what I found.

1. Render Performance: Avoid Unnecessary Redraws
In a Flutter application, every change can cause the screen to redraw. This often creates a big problem in terms of performance. You can optimise your application by avoiding unnecessary redraws.

• const Keyword: Widgets defined with const are immutable and are not redrawn unnecessarily. Using const, especially when creating static structures, can provide a great improvement in performance.

const Text(
  'Hello World!',
  style: TextStyle(fontSize: 24),
);

The widget defined in this way will not be redrawn unless it changes.

• ‘shouldRebuild’ Control: Within some widgets, you can use the shouldRebuild function to make the widget redraw only when certain conditions are met.

@override
bool shouldRebuild(covariant CustomWidget oldWidget) {
  return oldWidget.value != value;
}

2. List Performance: Optimising Large Lists
Working with large datasets can cause performance issues, especially when displaying long lists. Flutter offers several optimisation tools for such situations.

• ListView.builder: In a fixed length or large list, it is more performant to use ListView.builder, which loads only the items in the view, rather than loading all items at once.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
);

• ReorderableListView: When creating sortable lists, this widget can be used to maintain performance. Likewise, it renders only the widgets that are needed and improves performance.

3. Asynchronous Coding: Manage Transactions without Locking the UI
Time-consuming operations, such as network requests or long-running processes, can freeze the UI. Flutter has several tools for managing asynchronous operations.

• FutureBuilder: FutureBuilder allows you to show a pending state in the UI while waiting for an asynchronous operation to complete. In this way, your application provides a seamless experience to users.

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Data: ${snapshot.data}');
    }
  },
);

• async and await: These keywords allow operations to be performed asynchronously. await waits for the operation to finish, while async indicates the completion of the operation. It is important to use these constructs correctly to prevent the UI from freezing.

Future<void> fetchData() async {
  final response = await http.get('https://api.example.com/data');
  // Operations need to be carried out here
}

4. Get rid of unnecessary packages: Lighten Your Code Base
Adding packages to your Flutter application can speed up the development process. However, unnecessary or excess packages can bloat your application and negatively impact performance.

• Dependency Management: Regularly review the dependencies in your pubspec.yaml file. Remove unused packages and measure their impact on performance.

dependencies:
  flutter:
    sdk: flutter
  # Remove unused packages

• Minimal Package Usage: If possible, only add packages that are really necessary. Prefer lighter packages and consider alternatives.

5. Flutter DevTools: Performance Analysis and Debugging
Flutter offers Flutter DevTools, a powerful tool for monitoring and solving performance issues. With this tool you can analyse your application’s CPU and memory usage, detect UI lags and make performance improvements.

• CPU Profile: Monitoring the CPU usage of your application allows you to understand which processes consume excess resources.
• Timeline: You can use the timeline tool to see where the UI is lagging. This tool shows which processes take the most time.
• Memory Profile: You can detect memory leaks and make optimisation. You can identify processes that consume too much memory and make improvements in memory usage.

Conclusion: Performance Optimisation is a Process
Performance optimisation, unfortunately, is not a one-time operation. As you develop the application and add new features, performance issues can arise again and again, and I’ve seen it happen many times. A simple change to a button’s performance analysis is therefore necessary to make improvements on a regular basis.

I hope that the techniques I have discussed here will help you make your Flutter application more performant, but of course every application is different and we should not forget to optimise it according to its specific requirements.

Happy coding to everyone!

Selin.