THE ART OF FLUTTER PERFORMANCE
Unleashing the full potential of your app
Content
Introduction
Overview
The Bigger Picture
The End Game
+
+
+
+
What is Performance?
An Overview of Performance
Performance is the ability of a software system to process users' requests, process data, and perform other functions quickly and effectively.
Generally speaking, performance refers to how quickly a system or program can accomplish an operation or job, how well it uses resources like memory and CPU, and how responsive it is to user inputs.
Why 60 FPS?
Is it even important
Frame Per second mean how many still images that are displayed on a screen every second to create a motion.
The higher the FPS, the smoother and more fluid the motion appears.
Flutter Rendering Mechanism
The Rendering Pipeline
🍿UI Thread - Dart code related to the user interface is executed within this thread. It basically build, layout, draws the widget tree, element tree and RenderObject tree.
🍿GPU Thread - It takes care of graphic-related code(Skia), rasterizes and composites the layer and display the tree on the screen.
Deconstruct your widget and you will uncover the existence of a preceding creation.
— Rexford Asamoah
The Bigger Picture
Scope of Performance
Performance Pitfalls
Categories of Perf
🍿Time ( Load time, Response time, Junks).
🍿Space ( memory usage, disk space, CPU usage).
Improving Performance
Breaking the potential
🪙 Avoid rebuilding widgets
🪙 Use const when possible
🪙 Reduce the use of Opacity(the formal run twice)
🪙 Minimize network request
🪙 Avoid over splitting(mounting and unmounting)
🪙 Use ListView.builder when you are dealing with a longer list
🪙 Dispose Controller to avoid memory leaks
🪙 Reduce the app size
// Use const when possible�const userText = Text('Hello, World!');
// Use const when possible
const backgroundContainer = Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
);
// Reduce the use of Opacity(the formal run twice)
Visibility(
visible: false,
child: Text('This widget is hidden'),
)
// You can use Container and stack in case you want opacity
...
Stack(
children: [
// container opacity
Container(
color: Colors.black.withOpacity(0.1),
...
Minimize network request
Try as much to cache data which may not change within the lifecycle of the user's’ journey.
You can also use request batching to combine multiple request into a single one
// Use RepaintBoundary when needed�...
RepaintBoundary(
child: CustomPaint(
isComplex: true,
willChange: false,
),
);
...
// Use ListView.builder when you are dealing with a longer list�...
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
...
// Dispose Controller to avoid memory leaks�...
final TextEditingController _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
...
The End Game
Tools to measure Performance
Flutter Devtools
Performance overlay
Dart Observatory
// Stopwatch�...
final stopwatch = Stopwatch()..start(); // Start the stopwatch
// Your code here
stopwatch.stop(); // Stop the stopwatch
// Print in milliseconds
print('Elapsed time: ${stopwatch.elapsedMilliseconds}');
...
// Stopwatch�...
final timeline = await driver.traceAction(() async {
/// Trace Logic Here
});
// write summary to a file
final summary = new TimelineSummary.summarize(timeline);
await summary.writeSummaryToFile('ui_timeline', pretty: true);
await summary.writeTimelineToFile('ui_timeline', pretty: true);
...
Firebase Performance
THANK YOU!