How we use Timer with flutter spinkit to navigate next page
Here is a Flutter code snippet that uses Flutter Spinkit to display a loading animation and navigate to the next screen after a specific time.
Steps of the Code:
- Use
flutter_spinkit
to show a loader animation. - Set a timer to navigate to the next page after a certain duration.
- Use
Navigator.pushReplacement
to transition to the next screen smoothly.
Add Dependency
First, add flutter_spinkit
to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
flutter_spinkit: ^5.2.0
Full Code (Splash Screen with Timer & SpinKit)
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SplashScreen(),
);
}
}
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State {
@override
void initState() {
super.initState();
// Set a timer to navigate to the next screen after 3 seconds
Timer(Duration(seconds: 3), () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueAccent,
body: Center(
child: SpinKitFadingCircle(
color: Colors.white,
size: 50.0,
),
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Home Page")),
body: Center(
child: Text(
"Welcome to Home Page!",
style: TextStyle(fontSize: 20),
),
),
);
}
}
Code Explanation:
✅ flutter_spinkit
is used to display the loading animation.
✅ Timer(Duration(seconds: 3), () {...}
navigates to the next page after 3 seconds.
✅ Navigator.pushReplacement
ensures that the SplashScreen is removed from the stack, so it won’t appear when navigating back.
✅ SpinKitFadingCircle
is a spinner animation from flutter_spinkit
. You can replace it with other animations.
Further Customization:
🔹 Change Background Color: Modify backgroundColor
.
🔹 Adjust Loading Duration: Change Duration(seconds: 3)
.
🔹 Use Different Animations: Replace SpinKitFadingCircle
with animations like SpinKitDoubleBounce
, SpinKitWave
, etc.
✅ The code is ready to run—test it and enjoy! 🚀