Create splash screen in Flutter

Create splash screen in Flutter

  •   Import the  image file 
We need to import the image files into the project. It is common practice to put image files in a images or assets folder at the root of a Flutter project.
  • Declare the Image in the pubspec.yaml

pubspec.yaml -

flutter:
uses-material-design:
true
assets:
- images/flutterwithlogo.png

  • main.dart File
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'SplashPage.dart';
import 'HomePage.dart';

void main() => runApp(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.black,
          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) =>  HomePage()
      },
    );
  }
}
  • SplashPage
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> {
  startTime() async {
    var _duration = new Duration(seconds: 5);
    return new Timer(_duration, navigationPage);
  }
  void navigationPage() {
    Navigator.of(context).pushReplacementNamed('/HomePage');
  }
  @override  void initState() {
    super.initState();
    startTime();
  }
  @override  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Image.asset('images/download.png'),
      ),
    );
  }
}




Comments

Popular posts from this blog

Working with Geolocation in Flutter

Fetch data from the Soap Webservice

An Introduction to Flutter: The Basics