Flutter app slow

Question

I'm trying out Flutter and my app is responding very very slow on both the emulator and real device. I get warnings like this

Skipped 51 frames! The application may be doing too much work on its main thread.

I'm aware Dart is a single-threaded programming language and in Android I used to solve this with the good old new Thread(); block for async. I am trying to apply the same in Flutter and I reading through Future await async and the sorts but the examples seem to be addressing when you reading data from the internet. My app doesn't read anything online at this stage, I'm getting Skipped x frames when my screen has progress dialog, when I am opening a new screen/page, and with every animation on the app. Here is an example of the class where I am getting the issue:

_buildContent(){
    return new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new InkWell(
          onTap: (){
            Navigator.push(context, new MaterialPageRoute(builder:
                (context) => new LoginScreen()));
          },
          child: new Container(
            height: 150.0,
            width: 150.0,
            child: new Image.asset("images/logo.png", fit: BoxFit.cover,),
          ),
        ),
        new Container(
          margin: const EdgeInsets.all(16.0),
          child: new CircularProgressIndicator(
              value: null,
              strokeWidth: 1.0,
              valueColor: new AlwaysStoppedAnimation<Color>(
                  Colors.white
              )
          ),
        )
      ],
    );
  }

I'm assuming the skipped x frames warning is caused by the progress dialog? I have another screen (Login Screen) which animates widgets into place when opened, the animations move so slow, I can literally see each frame being rendered. Is there a tutorial online that can assist with addressing this or just understanding Dart's Asynchronous Programming?

Answer 1

debug mode

• launch is slow
• blink when launch
• app size big.

because debug mode with Hot reloads.

when you create release apk https://flutter.io/docs/deployment/android

you can find

• fast launch
• no blink during the launch
• app size small (but bigger than the normal android app)

EDIT

https://flutter.io/docs/testing/ui-performance#debug-flags

Debug mode enables additional checks (such as asserts) that don’t run in profile or release builds, and these checks can be expensive. Debug mode also executes code in a different way than release mode. The debug build compiles the Dart code “just in time” (JIT) as the app runs, but profile and release builds are pre-compiled to native instructions (also called “ahead of time”, or AOT) before the app is loaded onto the device. JIT can cause the app to pause for JIT compilation, which itself can cause jank.

https://github.com/flutter/flutter/wiki/Flutter%27s-modes

Debug mode on device (including simulators, emulators): Turns on all the assertions in the world, includes all debugging information, enables all the debugger aids (e.g. observatory) and service extensions. Optimizes for fast develop/run cycles. Does not optimize for execution speed, binary size, or deployment. Used by flutter run. Built with sky/tools/gn --android or sky/tools/gn --ios. Also sometimes called "checked mode" or "slow mode".

Answer 2

Try running your app in release mode using flutter run --release in the terminal.

Answer 3

Debug build has some performance issues, as many asserts and other validations happen in release build. Release build is much more faster than debug build.

Running app in release build may help. Try to run in release mode

flutter run --release