Overview

Any current mobile app must have a high level of performance. Skipped frames and freezes harm app usefulness, leaving users with a negative impression. A stuttering game is useless if a slow e-commerce app is merely unusable.

The programme should maintain 60 FPS (frames per second) for most of the time to feel smooth or change frames every 16.66 milliseconds. Modern apps use a lot of visual elements simultaneously, which puts a lot of strain on the device’s hardware.

The major technique to improve the app’s performance is to improve the code and architecture. Fluttertop has many Flutter experiences, ranging from mobile banking and e-commerce businesses to streaming platforms and corporate apps. Read this blog to understand how you can improve your flutter application.

Before we get started, let’s see how you can measure a flutter application’s performance.

Measuring the performance of your Flutter App 

In general, rather than utilizing an emulator to assess performance in Profile mode, it is preferable to use a simple device (ideally a low-end one). Because the framework provides a wide range of choices for tests and performance measurement, performance testing in Flutter apps can be done in various ways. The most popular ones are listed below.

  1. a) Performance overplay – The Performance widget is one way to do Flutter performance testing. On top of the programme, the overlay widget shows two graphs. The top ‘ GPU ‘ chart shows the raster thread performance or communication between the app’s layer tree and the device’s GPU. Despite the name, the graph depicts how CPU resources are used. The UI thread, which comprises the written code performed by Flutter’s framework, is shown in the lower ‘UI’ graph.

The blue graph will drop down and display a white background with a red vertical line if a frame is seen for more than 16.6 milliseconds (indicating the app’s performance dips below 60 FPS). If this happens in the ‘FPS’ graph, it signifies the screen’s visual elements are too complex to render in time; if it occurs in the ‘UI’ chart, the Dart code is too expensive to execute in time. Look at the UI thread for probable faults if both graphs show a red bar.

There are various ways to start the performance overlay, including:

1) The inspector from Flutter – Toggle the Inspector view in DevTools after starting the programme in Profile mode. You can find The Performance Overlay button there.

2) The command prompt. To switch on the performance widget, use the flutter run –profile command followed by the P key.

  1. b) Performance View – You may learn about the app’s performance using three tools in the performance view, accessible through DevTools.

1) Flutter frame charts: It holds information about each frame, such as what work is done by the UI thread and the raster (GPU) thread during its rendering.

2) Timeline event chart: Displays a timeline of all events in the programme, including scene drawing, frame building, HTTP traffic, and more.

3) CPU Profiler: This displays the time each frame takes the CPU and method trace to complete.

ADD IMAGES FOR DIFFERENT CHARTS.

  1. c) Benchmark – Integration testing is used for benchmark tests. It is also helpful in assessing the app’s performance. Startup time, battery utilization, and jank are among the characteristics measured in the tests (skipped frames).

Steps for optimizing flutter performance

  • Avoid using an expensive construction method – 

Build() is a time-consuming and expensive procedure that uses a lot of CPU power. If you use a huge Widget with a large build() function, this can happen. It’s preferable to break out a Widget like this into smaller pieces based on encapsulation and how they change. Localize the setState() call to the subtree section (i.e., a node’s child) that requires UI modifications. If setState() is called too far up the tree, it rebuilds all of the tree’s descendent widgets.

  • Splitting widgets into methods is a no-no –

    If you have a big constructing method with many nesting levels, you should first split it up in different ways. However, even if some of the child widgets are fully static, Flutter will require to rebuild them every time the parent widget is rebuilt. Split complex widgets into smaller StalessWidgets to avoid wasting CPU power on repetitive rebuilding.
  • Make use of const Widgets –To keep the setState in the constant state and avoid wasteful widget rebuilding, use the const Constructor.
  • Savelayer calls should be avoided – SaveLayer() is a resource-intensive function that should be avoided wherever possible. Text (if an overflowShader is utilised); Chip (if disabledColorAlpha!= 0xff); ColorFilter, and ShaderMask are all widgets that can potentially trigger the saveLayer() process. Also, instead of utilizing a clipped rectangle, change the borderRadius widget’s property to round the rectangle’s corners to avoid calling saveLayer().
  • For lists and grids, lazy approaches are preferred – For any huge UI elements, Lazy Lists and Lazy Grids are preferred. When the app is launched, only the part visible on the screen is presented.
  • Instead of Container, use SizedBox – Use the SizedBox widget instead of the Container widget to create a box or whitespace with specific dimensions. It is less taxing on the system.
  • Opacity should only be used when essential – The Opacity Widget causes the widget to rebuild every frame, which might slow down Flutter performance, especially if there is animation. Compared to the Opacity widget, applying opacity directly to an image uses fewer resources. To increase performance, use TransparentImage, AnimatedOpacity, FadeInImage, or FadeInTransition widgets instead of the Opacity widget.
  • In 16 ms, build and render – Examine which frames take more than 16 milliseconds to create and render if the programme is skipping frames. Because the building and rendering threads are independent, you should aim for each frame to be built in 8ms or less and rendered in 8ms or less to obtain a total time of 16ms or less. Users will not notice a major visual change if frames are produced less than 16 ms, but it may increase battery life and reduce device heating.
  • With AnimatedBuilder, you can use pre-built child subtrees – It’s not good to place a child of a node that doesn’t depend on animation in the builder function if you’re using the AnimatedBuilder widget because it will rebuild the subtree on every animation tick. Build the subtree once and provide it to the widget as a child argument.
  • ListsView should not be used for long lists – If a list isn’t fully shown on a screen at once, use the ListView.builder function Object() { [native code] } instead of ListView() or Column (). Instead of producing objects all at once and significantly reducing performance, the function Object() { [native code] } will gradually render items as they scroll across the screen.

Conclusion 

Flutter speed optimization has a high reputation among developers, and the framework is regarded for providing near-native performance even in apps with intensive visual effects. 

Provide an example of an app related to this point that you have developed.

If you’re considering developing a mobile app, why not delegate the effort to professionals? We at Fluttertop have a lot of experience designing apps for various businesses and will be thrilled to help you with your project. Fill out the brief form below (attach a form or your landing page), and we’ll give you an estimate within 24 hours.