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:

  1. Use flutter_spinkit to show a loader animation.
  2. Set a timer to navigate to the next page after a certain duration.
  3. 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! 🚀