Question 76452 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter CircularProgressIndicator Freeze When Navigate to Another Page for a millisecond

Navigation gif

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

Tags:

2

Answers


  1. 0

    Rebuild app and try or try on other device.

    Login or Signup to reply.
  2. 0

    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 provided code looks totally fine.

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search