Splash Screen is important for Every Mobile for Building Brand in the Market so let’s See How to Create Splash screen in a flutter with Easy Way.

Splash Screen Animation can be a Simple Logo Animation of your Brand. this Splashscreen animation can be done with the help of  splashscreen package.

What is Splash Screen in Mobile App?

Often Splash screen mention as a Launch Screen Or Boot Screen is the first screen of the apps that displayed whenever Application Loads. it can be a Welcome screen of the apps that users watch while Launching Mobile Apps.

Here are the Best Example for Brand Awesome Splash Screen🖥

Filpkart youtube google photo splash screen example

Let’s see how to Create a Splash screen in flutter app

💻 Installation

First,  you will need to add package name splashscreen

In the dependencies: section of your pubspec.yaml, add the following lines as :

splashscreen: ^1.2.0

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

Now run Flutter package get in your terminal which we’ll install splashscreen package.

⚡️ Import

import ‘package:splashscreen/splashscreen.dart’;

So SplashScreen() method is giving us Property like title, second, navigateAfterSecond, image, backgroundColor, photosize, onClick and loaderColor etc

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      title: new Text(
        'Welcome In SplashScreen',
        style: new TextStyle(fontWeight: FontWeight.bold, 
            fontSize: 20.0),
      ),
      seconds: 8,
      navigateAfterSeconds: AfterSplash(),
      image: new Image.asset(
          'assets/loading.gif'),
      backgroundColor: Colors.black,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 150.0,
      onClick: () => print("Flutter Egypt"),
      loaderColor: Colors.white,
    );
  }
}

 [powerkit_button size=”lg” style=”primary” block=”false” url=”http://” target=”_blank” nofollow=”false”] Download Asset
[/powerkit_button]

navigateAfterSecond will helps to move a different screen like AfterSplash the screen, Below Snnipet of AfterSplash widget

class AfterSplash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Welcome In SplashScreen Package"),
        automaticallyImplyLeading: false,
      ),
      body: new Center(
        child: new Text(
          "Succeeded!",
          style: new TextStyle(fontWeight: FontWeight.bold,
              fontSize: 30.0),
        ),
      ),
    );
  }
}

Our 📷 Final App will look like this:

 

splash screen

 

You can see the full source code of the project here.

🤝 Show Some Support

If you liked the app, show some love Here  ⭐️

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the video, leave me a comment and I’ll do my best to answer it.