Flutter CircularProgressIndicator Freezes When Navigating to Another Page for a millisecond

Question

iam new at flutter iam trying to add CircularProgressIndicator at page loading and then change state but its seems like it freeze on navigation

Main.Dart

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: AppString.appName,
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.grey.shade900,
      ),
      home: const DummyScreen(),
    );
  }
}

Navigation Screen

class DummyScreen extends StatelessWidget {
  const DummyScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: Center(
        child: TextButton(
          child: const Text("Navigate"),
          onPressed: (){
            Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const AnotherDummyScreen()));
          },
        ),
      ),
    );
  }
}

CircularProgressIndicator Screen

class AnotherDummyScreen extends StatelessWidget {
  const AnotherDummyScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  const Scaffold(
      body: Center(
         child: CircularProgressIndicator(),
        ),
      );
  }
}

CircularProgressIndicator Widget Should be more smoothly at page Load as it take a while to start animate

Answer 1

You can using other page transition such as cupertinopage transition.cause that progress lag in material page transition.

Answer 2

I assume you run this on an emulator or are performing any other heavy performance tasks either in your app or on the device?

Why you have to test on real device taken from the flutter docs:

• Simulators and emulators don’t use the same hardware, so their performance characteristics are different some operations are faster on simulators than real devices, and some are slower.
• 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.

"Jank" can have multiple reasons. The you code provided code looks totally fine to me.

If you are running this on a real device I recommened to take look at concrete profiling in flutter. You can do for instance:

flutter run --profile

Note that you also should do profiling always on a real device. With profiling you can then identify the root issue of your jittering animation. The link from the flutter docs above also does provide a good understanding on how profiling works and how to interpret everything. It also provides information on how to use the flutter dev tools, VScode and Android Studio for further performance analysis.