I'm trying out Flutter and my app is responding very very slow on both the emulator and real device even in release mode.

return Scaffold(
    appBar: DesignConfig.statusBar(
        leading: GestureDetector(
      onTap: () {
        Navigator.of(context).pop();
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Card(
          child: Icon(
            CupertinoIcons.arrow_left,
            color: ColorsRes.appDarkBlueColor,
          ),
          color: ColorsRes.textFeildColor,
        ),
      ),
    )),
    extendBody: true,
    extendBodyBehindAppBar: true,
    backgroundColor: ColorsRes.white,
    body: StreamBuilder(
        stream: KidServices().streamKid(widget.kidID),
        builder: (context, AsyncSnapshot<KidModel> snapshot) {
          if (snapshot.hasData) {
            KidModel? kid = snapshot.data;

            return ListView(
              children: [
                Lottie.asset('assets/json/Kids.json',
                    width: width / 2, height: width / 2),
                SizedBox(
                  height: 8,
                ),
                KidProfile(
                  name: kid!.name,
                  points: kid.points,
                  code: kid.code,
                  photoUrl: kid.photoUrl,
                ),
                SizedBox(
                  height: 16,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    _card(() {
                      Get.to(() => PrayersScreen(
                            kid.id,
                            isAdmin: widget.isAdmin,
                          ));
                    }, 'assets/images/Prayer.png', 'Offering Prayers',
                        width),
                    _card(() {
                      Get.to(() => RecitingScreen(
                            kid.id,
                            isAdmin: widget.isAdmin,
                          ));
                    }, 'assets/json/Quran Reciting.json',
                        'Quran Recitation', width),
                  ],
                ),
                _tile(
                    () => _update(
                        givingSadqa: !kid.activities!.givingSadqa!,
                        feedingNeedy: kid.activities!.feedingNeedy!,
                        helpingSomeone: kid.activities!.helpingSomeone!,
                        kid: kid,points: kid.activities!.givingSadqa!?-10:10),
                    'assets/json/Sadqa Charity.json',
                    'Giving Sadqa',
                    '10',
                    kid.activities!.givingSadqa!,
                    width),
                _tile(
                    () => _update(
                        givingSadqa: kid.activities!.givingSadqa!,
                        feedingNeedy: !kid.activities!.feedingNeedy!,
                        helpingSomeone: kid.activities!.helpingSomeone!,
                        kid: kid,points: kid.activities!.feedingNeedy!?-20:20),
                    'assets/images/feeding needy.png',
                    'Feeding Needy',
                    '20',
                    kid.activities!.feedingNeedy!,
                    width),
                _tile(
                    () => _update(
                        givingSadqa: kid.activities!.givingSadqa!,
                        feedingNeedy: kid.activities!.feedingNeedy!,
                        helpingSomeone: !kid.activities!.helpingSomeone!,
                        kid: kid,points: kid.activities!.helpingSomeone!?-10:10),
                    'assets/json/Bubble for prayer.json',
                    'Helping Someone',
                    '10',
                    kid.activities!.helpingSomeone!,
                    width,
                    tempSource: 'assets/images/helping someone.png'),
              ],
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text('Something went wrong'),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(
                color: ColorsRes.appDarkBlueColor,
              ),
            );
          }
        }));

}

Here is my code whenever I navigate to/from this screen the app is lagging. I am using some assets images and JSON icons I think the issue causes by these things. For Navigation i am using GetX and the rest of data is streams from firebase. These are some console output while navigating to the above screen

[GETX] GOING TO ROUTE /StudentDetail
I/HwPhoneWindow(13448): updateLayoutParamsColor false mSpecialSet=false, mForcedNavigationBarColor=true, navigationBarColor=ff000000, mNavBarShow=false, mIsFloating=false 
I/ViewRootImpl(13448): jank_removeInvalidNode all the node in jank list is out of time

CodePudding user response：

You may need to lazily load your content inside the list, review this tutorial to know more: https://youtu.be/qax_nOpgz7E

In general, if you want to know about your performance issues or where exactly some lagging or janks, you may need to use the profile mode to see what's going on, as this mode gives you the release performance with some tools to test your performance.

More about profile mode: https://youtu.be/vVg9It7cOfY

CodePudding user response：

It looks like your ListView does not contain too many items, so what you are doing is fine, lazy loading or not, should not matter too much.

I suspect the problem might be your images are too large. Please try it with smaller images, for example, test your app with images that are less than 400x400 in size and see if the issue is gone. If it works well with smaller images, you can do further tests and decide on suitable image size for your application.