Search code examples
fluttersplash-screenflutter-web

Splash Screen in flutter web


There are Android and ios splash screens in their respective folder which we can change. Is there any splash screen for flutter web? I see a white screen before web page is loaded. how can we change that ? is that a splash screen or loading wait time?


Solution

  • The white screen you are seeing now its because of load time



    What I do for using a splash screen is

    I launch my splash screen first and inside init method

    I am using a timer and as soon as the timer ends

    I am calling another page

    main.dart

    import 'package:flutter/material.dart';
    import 'src/splash_screen.dart';
    
    main() {
      runApp(App());
    }
    
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'AppName',
            theme: ThemeData(
              primaryColor: Colors.white,
              backgroundColor: Colors.white,
              primaryIconTheme: new IconThemeData(color: Colors.black),
            ),
            home: SplashScreen());
      }
    }
    

    splash_screen.dart

    import "package:flutter/material.dart";
    import 'dart:async';
    import 'login/login.dart';
    
    class SplashScreen extends StatefulWidget {
      _SplashScreenState createState() => _SplashScreenState();
    }
    
    class _SplashScreenState extends State<SplashScreen> {
      @override
      void initState() {
        super.initState();
        new Timer(new Duration(milliseconds: 1000), () { // set your desired delay time here
          Navigator.of(context).pushReplacement(
              new MaterialPageRoute(builder: (context) => new LoginScreen()));
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: Container(
            alignment: Alignment.center,
            child: Image.asset(fullLogoPng,
                width: MediaQuery.of(context).size.width / 1.5,
                fit: BoxFit.scaleDown),
          ),
        );
      }
    }