Flutter Full Screen Splash Screen Tutorial

In this example you will learn how to implement Full Screen Splash Screen in Flutter.

You will also learn how to hide status bar on Android OS and notch on iOS in your flutter splash screen.

We will create two screens.

Our launcher screen will be Screen with full screen Image.

And after defined splash time it will navigate to Home Screen.

You will also learn how to use Routes and Navigation in Flutter.

This will be output of our example code.

Flutter Full Screen Splash Screen
Example using Dart
Flutter  Full Screen Splash Screen Page

main.dart

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

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
// fixing app orientation.
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
hintColor: Colors.white,
inputDecorationTheme: new InputDecorationTheme(
labelStyle: new TextStyle(color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0)))),
home: new SplashPage(),
routes: <String, WidgetBuilder>{
'/HomePage': (BuildContext context) => new HomePage()
},
);
}
}

Main part of code in main.dart file is below one.

home: new SplashPage(),
routes: <String, WidgetBuilder>{
'/HomePage': (BuildContext context) => new HomePage()
},

Here we are defining routes. Mapping Different Screens to String Names.

Let’s add Splash Page and Home Page.

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';

class SplashPage extends StatefulWidget {

@override
SplashPageState createState() => SplashPageState();
}

class SplashPageState extends State<SplashPage> {
void navigationToNextPage() {
Navigator.pushNamed(context, '/HomePage');
}

startSplashScreenTimer() async {
var _duration = new Duration(seconds: 5);
return new Timer(_duration, navigationToNextPage);
}

@override
void initState() {
super.initState();
startSplashScreenTimer();
}

@override
Widget build(BuildContext context) {

// To make this screen full screen.
// It will hide status bar and notch.
SystemChrome.setEnabledSystemUIOverlays([]);

// full screen image for splash screen.
return Container(
child: new Image.asset('assets/splash.png', fit: BoxFit.fill));
}
}

Second Screen After Splash (Home Screen)

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
@override
HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: kGroceryAppBarBackgroundColor,
title: new Text('HOME'),
centerTitle: true,
),

body: new Container());
}
}

copyright : http://developine.com/

Posts created 35

Leave a Reply

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

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top