user8373873
user8373873

Reputation: 41

Flutter CircularprogressIndicator with Navigation

How to implement flutter code so that as soon as my application is launched, it will show circularprogressindicator and then load another class through Navigation.push As I know navigation.push requires a user action like ontap or onpressed

Please assist me with this

Upvotes: 0

Views: 1527

Answers (1)

Alok
Alok

Reputation: 8988

The requirement you need is of Splash Screen, which stays for a while, and then another page comes up. There are certain things you can do, that is

  • Use Future.delayed constructor, which can delay a process by the Duration time you provide, and then implement your OP, in this case, you Navigator.push()
Future.delayed(Duration(seconds: your_input_seconds), (){
   // here you method will be implemented after the seconds you have provided
   Navigator.push();
});
  • The above should be called in the initState(), so that when your page comes up, the above process happens and you are good do go
  • You can use your CircularProgressIndicator normally in the FirsScreen

Assumptions:

  • Our page will be called FirstPage and SecondPage respectively.
  • We will be going from FirstPage -> SecondPage directly after N seconds
  • Also, if you are working on a page like this, you don't want to go back to that page, so rather than using Navigator.push(), use this pushAndRemoveUntil

Let us jump to the code now

FirstPage.dart

// FIRST PAGE
class FirstPage extends StatefulWidget {
  FirstPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  
  //here is the magic begins
  @override
  void initState(){
    super.initState();
    //setting the seconds to 2, you can set as per your
    // convenience
    Future.delayed(Duration(seconds: 2), (){
      Navigator.pushAndRemoveUntil(context, MaterialPageRoute(
        builder: (context) => SecondPage()
      ), (_) => false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: CircularProgressIndicator()
        )
      )
    );
  }
}

SecondPage.dart

// SECOND PAGE
class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: Text('Welcome to Second Page')
        )
      )
    );
  }
}

Result

Look at how the page works, with out having any buttons, stays for 2 seconds and then go to second page. But also, no back button, since going back is not the right choice. You must remove all the items from the stack if you are making a page like this

Resultant Gif

EDITS AS PER THE ERROR

Since I can see that you're currently getting an error because, the Widget is not ready, to even call the Future.delayed(). To do that what you need to do is, make changes in your FirstPage.dart, initState() method. Rest can left as is

@override()
void initState(){
  super.initState();

  // Ensures that your widget is first built and then
  // perform operation
  WidgetsBinding.instance.addPostFrameCallback((_){
     //setting the seconds to 2, you can set as per your
    // convenience
    Future.delayed(Duration(seconds: 2), (){
      Navigator.pushAndRemoveUntil(context, MaterialPageRoute(
        builder: (context) => SecondPage()
      ), (_) => false);
    });
  });
}

OR

If WidgetsBinding.instance.addPostFrameCallback((_){}, this doesn't comes handy, use this in place of the mentioned function

// This needs to be imported for this particular only
// i.e., ScheduleBider not WidgetBinding
import 'package:flutter/scheduler.dart';

@override
void initState(){
  super.initState();

  SchedulerBinding.instance.addPostFrameCallback((_){
     //setting the seconds to 2, you can set as per your
    // convenience
    Future.delayed(Duration(seconds: 2), (){
      Navigator.pushAndRemoveUntil(context, MaterialPageRoute(
        builder: (context) => SecondPage()
      ), (_) => false);
    });
  });
}

Upvotes: 2

Related Questions