How do I add navigation on flutter

How can I make the HomeScreen load after the Spinkit . I was able to add the spinkit loaders on my app, but I am unable to add the navigation in it so that it can runs the home screen automatically,

Please help

This is are the codes I have used in the spinkit page:


import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:road_sign/screen/home/home_screen.dart';

class LoadingPage extends StatelessWidget {
  const LoadingPage({Key? key}) : super(key: key);
  void main(List<String> args)  {
    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[50],
      body: Center(
        child: SpinKitThreeBounce(
          size: 90,
          color: Colors.green,
        ),
      ),
    );
  }
}

And these are codes of main.dart

import 'package:road_sign/screen/home/home_screen.dart';
import 'package:road_sign/screen/loadingScreen/loadingPage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Road Sign',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: LoadingPage(),
    );
  }
}

CodePudding user response：

You can use an async method and add a delay before navigation.

Please check the below sample :

class LoadingPage extends StatefulWidget {
  const LoadingPage({Key? key}) : super(key: key);

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

class _LoadingPageState extends State<LoadingPage> {
  @override
  void initState() {
    autoNavigation();
    super.initState();
  }

  void autoNavigation() async {
     // you can change delay here
    await Future.delayed(Duration(seconds: 1));
    Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => HomeScreen(),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[50],
      body: Center(
        child: SpinKitThreeBounce(
          size: 90,
          color: Colors.green,
        ),
      ),
    );
  }
}

It will work, But I suggest using a state management solution to split logic from UI.