Flutter Performance Tricks

Flutter Performance Tricks

In recent times, product owners have required excessive overall performance programs to keep their customers engaged with the app. Lagging and skipped frames annoy users and supply them with a horrific personal influence. As a result, having a feature-rich app imparting their personal behaviors to run clean packages is far more important. This blog post will guide you on how to enhance the flutter performance of your current app.

Avoid State Flutter Widgets

The common mistake all of us make is the usage of state flutter widgets for flutter app development at the beginning of the improvement process. Stateful widgets can be used if your utility has a large build function and you also want to rebuild. Setstate() and statefulwidget ought to be used to rebuild or update. Furthermore, for better flutter overall performance, avoid using it in entire widgets.

Use Const Keyword

The constant keyword functions as a regular, which is a type of flutter widget used to avoid during compilation. Const allows the use of more than one widget without reducing overall performance. Another advantage of using const is that it avoids rebuilding every time you use one-of-a-kind widgets.

const Color color= Color(0xFFFFFFFF); 
const Text('This is a text');

Try Using Async/Await

It’s very important to test at the time of improvement whether the code that is used in the application is synchronous or asynchronous. With the assistance of async/await, code can be written asynchronously inside the Flutter utility. Async code is hard to upgrade, and debugging the asynchronous code is likewise difficult. But the code’s readability increases when combined with async.

Display Frames Within 16ms

The show is split into two components: structure and image. Developers have 8 MS for the shape and another 8 MS for the photograph to render a 60 Hz show. Usually divide 16 ms similarly between shape and image for higher flutter performance in your utility. You must be wondering if the 16ms will affect the quality of the show. Don’t fear; 16ms will not affect the greatness of the show. It will do nothing to improve the machine’s battery life. Moreover, with 16 ms, you can get higher performance on smaller devices.

Rebuilding of Widget in AnimatedBuilder

Animation is one of the maximum attractive capabilities in any web or mobile application. It grabs the consumer’s attention, however on the same time, it decreases the performance of the software. Builders commonly use animationcontroller. But, it rebuilds a couple of widgets in animatedbuilder, and that’s the commonplace motive in the back of the sluggish flutter performance.

Avoid Build Method

Try to stay away from using the construct() technique, as it is highly priced and consumes masses of CPU electricity. Repetitive use of build() can lower flutter performance. To improve the overall performance of your current utility, divide the large widgets created with the construct() technique into smaller ones.

Now let’s learn more detailed information together!

While Loops

uncached length:

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  var counter = 0;
  num element = 0;
  while (counter < list.length) {
    element = pow(list[counter], 3);
    counter++;
  }

cached length:

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  var counter = 0;
  num element = 0;
  var length = list.length;
  while (counter < length) {
    element = pow(list[counter], 3);
    counter++;
  }

reversed order:

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  var counter = list.length - 1;
  num element = 0;
  while (counter >= 0) {
    element = pow(list[counter], 3);
    counter--;
  }

For Loops

uncached length:

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  num element = 0;
  for (var i = 0; i < list.length; i++) {
    element = pow(list[i], 3);
  }

cached length:

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  num element = 0;
  var length = list.length;
  for (var i = 0; i < length; i++) {
    element = pow(list[i], 3);
  }

reversed order:

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  num element = 0;
  for (var i = list.length - 1; i >= 0; i--) {
    element = pow(list[i], 3);
  }

For…in loop

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  num elementNum = 0;
  for (var element in list) {
    elementNum = pow(element, 3);
  }

.forEach method

  List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];
  num elementNum = 0;
  list.forEach((element) {
    elementNum = pow(element, 3);
  });

.map method

 List<int> list = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
  ];
    num element = 0;
  list.map((e) {
    element = pow(e, 3);
  }).toList();

As you can see in the times, although we use a small list, there are still differences in the times. In cases where you use big data, these times will increase exponentially.

In conclusion, any of the while or for loops can be used with a minimum performance difference between every loop (apart from the reversed loops).

Images and Icons

It depends on the situation, but we must cache all images within the main.

You don’t need to include any packages for images. You can use the precacheImage widget.

precacheImage(AssetImage('assets/images/medium.png'), context);

For SVGs, you can use the flutter_svg package.

Use builder named constructors

builder only renders displayed items on the screen(ListView.builder). If you don’t use builder, it renders all of the children even if they can’t be seen (listView).

Scrollable Widgets

Not using shrinkWrap in scrollable widgets can improve performance.

cacheHeight and cacheWidth values to Images

You can reduce the memory consumption if you use this values.

Thanks for reading.