Splash Screen in flutter web

Question

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?

Philemon

It's loading wait time – Igal

I maintain a package flutter_native_splash that you can use to replace the white screen that is displayed while loading with a splash screen. – Antimicrobial

Answer 1

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),
      ),
    );
  }
}

Berhley

This is not an actual splash screen but rather a forced delay. To use a native splash screen for the web, one should edit the web/index.html file to include a splash screen. More details – Mcrae

Answer 2

When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time, the native app displays a white splash screen.

You can change this using flutter_native_splash that contain rich documentation for using this package.

You don't need to read rest texts, just head on flutter_native_splash.

From setting-the-splash-screen of this package, it comes with some parameter like background_image,color, image for splash etc. can be used to modify the splash-screen.

My flutter_native_splash.yaml file (on root directory) contains

flutter_native_splash:
  color: "#FFFFFF" #backgound color
  image: assets/images/splash.png

Simply run on terminal to generate splash screen.

flutter pub run flutter_native_splash:create

Kondon

Answer 3

Spash Screen With animation

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(
      color: Colors.white,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: Colors.purple,
          primarySwatch: Colors.purple,
          fontFamily: 'FIRSNEUE'),
       home: SplashScreen());
  }
}

splashScreen.dart

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);  //SetUp duration here
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
        vsync: this, duration: new Duration(seconds: 2));
    animation =
    new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Padding(padding: EdgeInsets.only(bottom: 30.0),child:new 
        Image.asset('assets/img.png',height: 25.0,fit: BoxFit.scaleDown,))


            ],),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Collimore

Answer 4

Use this splashscreen A splashscreen package to be used for an intro for any flutter application easily with a lot of customization

Nealey