Navigate between screens with transition in Dart - flutter

Question

I have 2 screens and I want to navigate between them with a custom transition (using a library named flutter_spinkit).
How can I go from Page1 to Page2 showing my custom loading screen for 2-3 seconds ?
Here is my code:
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
main() {
runApp(MaterialApp(
home: Page1(),
));
}
class Page1 extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: RaisedButton(
child: Text('Go!'),
onPressed: () {
Navigator.of(context).push(_createRoute());
},
),
),
);
}
}
Route _createRoute() {
return PageRouteBuilder(
// transitionDuration: Duration(seconds: 1),
transitionsBuilder: (context, animation, animationTime, child) {
child = Scaffold(
backgroundColor: Colors.purple[700],
body: Center(
child: SpinKitFadingCube(
color: Colors.white,
size: 100.0,
),
),
);
return ScaleTransition(
scale: animation,
child: child,
alignment: Alignment.center,
);
},
pageBuilder: (context, animation, animationTime) => Page2(),
);
}
class Page2 extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Text('Page 2'),
),
);
}
}

Answer 1

Animate when going from One Screen to Another Screen
Your onPressed or onTap method:
InkWell(
onTap: () {
Navigator.of(context).push(_createRoute());
},
)
and then inside your _createRoute method
Route _createRoute() {
return PageRouteBuilder(
transitionDuration: Duration(seconds: 2), //You can change the time here
pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
var begin = Offset(1.0, 0.0);
var end = Offset.zero;
var curve = Curves.easeInCirc;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
);
}
with Duration(seconds: 2) you can change the time from microsecond, seconds, minutes, hours
There are many other Curves animations like Curves.easeInCirc, which can be found Here
OR
If you want to use Flutter_Spinkit for showing a type of Animated Loading Indicator than this is how it is done!
Add Dependency:
dependencies:
flutter_spinkit: "^4.1.2"
Then import it in your screen:
import 'package:flutter_spinkit/flutter_spinkit.dart';
and then you can use the Flutter Spinkit Loader where it is required like:
final spinkit = SpinKitFadingCircle(
itemBuilder: (BuildContext context, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.green,
),
);
},
);

Answer 2

I finally got your point. Maybe you just need to change the transitionsBuilder to check the animation is complete or not. I also change the name of SpinKitFadingCube because it should not replace the original child Widget.
transitionsBuilder: (context, animation, animationTime, child) {
final loading= Scaffold(
backgroundColor: Colors.purple[700],
body: Center(
child: SpinKitFadingCube(
color: Colors.white,
size: 100.0,
),
),
);
if(animation.isCompleted){
return child;
}else{
return loading;
}
},