How to boost flutter performance?

Question

How to boost flutter performance and speed up our application. As I am working on a larg application and I worried about performance issue, becuase I need a supper fast app.

Here I have a large list of items like a chat application and there is something mentioned below that I am worry about: 1: I need scrolling more than 3000 items smoothly 2: I need to update specific item during chat, like: seen, delived, sent or deleted. 3: and navigation

In react-native there is a lot of way like using PureComponent or shouldComponentUpdate(nextProps, nextState) function to decrease rendering.

for example in react-native we can split a big list Component into sub Component of items, then we can use shouldComponentUpdate(nextProps, nextState) and prevent any rendering does not depends to the current Item.

This aprroach help us to just render the item we need to update. and also there is alot of other way we can use for speed up our application.

although One big problem I encounted in react-native is, if we scroll very fast more than 300 items there a blank space appears instaed of list items.

So my question is how to find same tips in FLUTTER, I mean Is there a tips/trick for flutter like I mentioned above in react-native? if yes please help me with a simple examples. Thank you in befor

Answer 1

Here I have a large list of items like a chat application and there is something mentioned below that I am worry about: 1: I need scrolling more than 3000 items smoothly 2: I need to update specific item during chat, like: seen, delived, sent or deleted. 3: and navigation

Use ListView.builder() widget to create smooth scrollable list without any length without any performance issue.

It's functionality basically corresponds to RecyclerView (Native Android). The items which are not visible on the screen are not rendered so it doesn't practically matter how many items exist in the list in total.

Flutter handles all those minor things for you so that you can focus on other important aspects of your app. Flutter and RN are similar to some extent but they are not the same.

Working Example:

import 'package:flutter/material.dart';

List<String> litems = ["1","2","Third","4"];

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: new ListDisplay(),
    );
  }
}
class ListDisplay extends StatelessWidget {
  @override
  Widget build (BuildContext ctxt) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Dynamic Demo"),),
      body:  new ListView.builder(
                   itemCount: litems.length,
                   itemBuilder: (BuildContext ctxt, int index) {
                     return new Text(litems[index]);
    }
  )
      ),
    );
  }
}

If you still face the same issue, then try running the app in release mode. That should surely solve your issue for the above example.

If you want some more tips on increasing your app's overall performance head over to the links given below,

https://flutter.dev/docs/testing/best-practices

https://medium.com/flutter-community/improve-your-flutter-app-performance-split-your-widgets-935f97e93f7d

To run your app in release mode execute flutter run --release in your app's terminal to run your app in release mode.

Answer 2

While using the provider for example if have data that you will need only on a specific page and this data will be temporarily viewed avoid adding it to the provider I highly advise you to use multiple providers. so you avoid rebuiding all the screen components when changing the state. also if you have too many stateless widgets in a screen and you have only few widgets that are stateful. you should wrap those with state changeable components (stateful) with consumer so when notifying the UI of a state change only those concerne will be updated. that will help avoiding rebuid entire screen.