Do you want to improve the performance of the Flutter app? As we all know, it is necessary and reasonable to optimize the performance of the Flutter app because it provides scalability, reliability, and security to web and native applications, as well as a great support in your application development.
So, how do optimize or improve the performance of the Flutter app? Hope this tutorial will help you achieve effective application development.
How to Improve the Performance of Flutter App
1. Use const Widgets
Const widget is a Flutter widget that is used for constants to make a rebuild at a time of compilation. It will not reduce the performance if multiple widgets are used. See the example as follows.
const EdgeInsets.fromLTRB(16, 4, 16, 8);
const Color lightGray = Color(0xFFFEFEFE);
const Text('This is a static text')
2. Use itemExtent in ListView
If you want to make scroll animation when you have a long list, you should try itemExtent. The Flutter will not calculate all widgets' heights but calculate the ListView scroll position directly. This will be more effective. You may see an example here.
class MyHomePage extends StatelessWidget {
final widgets = List.generate(
10000,
(index) => Container(
color: Colors.primaries[index % Colors.primaries.length],
child: ListTile(
title: Text('Index: $index'),
),
),
);
final _scrollController = ScrollController();
void _onPressed() async {
_scrollController.jumpTo(
_scrollController.position.maxScrollExtent,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _onPressed,
splashColor: Colors.red,
child: Icon(Icons.slow_motion_video),
),
body: ListView(
controller: _scrollController,
children: widgets,
itemExtent: 200,
),
);
}
}
3. Don't Rebuild Multiple Widgets in AnimatedBuilder
If you are using AnimationController in your application development, multiple widgets (the whole UI) will be rebuilt in AnimatedBuilder. And this will give rise to the slow performance of the Flutter app. So, we suggest you use CounterWidget instead, which allows you to develop animation with no laggy performance issues.
4. Don't use Opacity If Necessary
Opacity is used to make the widget disappear and appear again. However, it will cause the widget to rebuild each frame, which may not be so efficient and will cause the laggy performance of the Flutter app.
Fear not. Here's a solution. In order to improve the performance of the Flutter app, you can use AnimatedOpacity and FadeTransition instead. They will work more efficiently than using Opacity.
5. Use nil Rather than const Container()
Still get a laggy performance? Try with nil instead const Container(). See the example below.
// good text != null ? Text(text) : const Container() // Better text != null ? Text(text) : const SizedBox() // BEST text != null ? Text(text) : nil or if (text != null) Text(text)
6. Don't Use the Build() Method
The Build() method will consume a lot of CPU power. That is to say, it will definitely decrease the performance of the Flutter app if Build() method is repetitively used. So, it is not reasonable to use this method. And the large widgets developed with the Build() method should be divided into smaller ones.
When Should We Improve the Performance of the Flutter App
As you can see above, there are a lot of methods to improve the performance of the Flutter App. But how can we measure the Flutter performance? The easiest way to tell when should we improve the performance of the Flutter app is to use the Performance widget.
The overlay widget provides two graphs for measurement, the top 'GPU' and the low 'GPU', which tells how CPU resources are utilized.
The blue graph will drop down and reveal the white background and you'll see a red vertical line if a frame is shown for more than 16.6 milliseconds. Please note that the visual elements on the screen are too complicated to render in time if it occurs in the 'FPS' graph; The Dart code is too expensive to execute in time if it occurs in the 'UI' graph. A red bar shows in both graphs, start by examining the UI thread for possible issues.