Create Splash Screen in Flutter

Here, we create Splash Screen, When App Starts Splash screen appears for 3 seconds and then main page opens. This the code of Splash Screen.

import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  void initState() {
    super.initState();
    startTimer();
  }
  startTimer() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigatePage);
  }
  void navigatePage() {
    Navigator.of(context).pushReplacementNamed('/home');
  }
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ClipRRect(
              child: Image.network(
                "https://via.placeholder.com/150",
                height: 100,
              ),
              borderRadius: BorderRadius.circular(50.0),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20),
            ),
            Text(
              "App Name",
              style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the output of the code :

Splash Screen in Flutter
Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *