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?
- 3It's loading wait timeAyush Bherwani– Ayush Bherwani2019-12-25 18:09:23 +00:00Commented Dec 25, 2019 at 18:09
- 3I maintain a package flutter_native_splash that you can use to replace the white screen that is displayed while loading with a splash screen.jon– jon2021-08-05 17:35:53 +00:00Commented Aug 5, 2021 at 17:35
Add a comment |
4 Answers
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
Comments
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), ), ); } } 
1 Comment
Ashutosh Singh
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
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, ), ], ), ], ), ); } } 
Comments
Use this splashscreen A splashscreen package to be used for an intro for any flutter application easily with a lot of customization
