Flutter CircularprogressIndicator with Navigation - flutter

Question

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

Answer 1

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
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);
});
});
}