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.