How To Make Splash Screen Using Flutter In Android

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

Splash Screen is the first screen that we see when we run our application. It is also known as Launch Screen. We will implement three basic methods to add a splash screen in our app.

How To Make Splash Screen Using Flutter In Android

Step 1 : 

In this method, we will create a splash screen with the help of the Timer() function.The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.
Step 2:
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below
 
flutter: 
  assets: 
   - assets/images/
 

Complete Code For Splash Screen In Flutter

import 'dart:async';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3),
            ()=>Navigator.pushReplacement(context,
            MaterialPageRoute(builder:
                (context) =>
                SecondScreen()
            )
        )
    );
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child:Image.asset("assets/images/bs_logo.png")
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
          title:Text("BajarangiSoft.com")
      ),
      body: Center(
          child:Text("Home page",textScaleFactor: 3,)
      ),
    );
  }
}

Related Post