Blog

We see them in almost all flutter apps. First this may be because Flutter is a hybrid development framework and so needs some time to load the native resources it needs. Splash Screens can be used to display your brand to your users and can be made stunning.

This example we are creating shows a splash screen as we start our app.

Here is the demo of the splash screen that will be created:

Step 1: Dependencies

No external dependencies are needed for this project.

Step 2: Write Dart code

Start by importing material.dart. This is the package that contains the material UI elements we will use:

import 'package:flutter/material.dart';

Create a main method. This will be luanching point of the app. Through the runApp() function, we will laucng our MyApp class:

void main() => runApp(MyApp());

Create a stateless widget, this will be the root of our app:

class MyApp extends StatelessWidget {

We build our page by overriding the build() method. In this case we will be returning a material app:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

Now proceed to set the title, appbar and body of the app:

 title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Splash Screen Example"),
        ),
        body: Center(
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

Here is the full code:

main.dart

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Splash Screen Example"),
        ),
        body: Center(
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

Reference

Find the download links below:

No.	Link
1.	Download code