A Flutter implementation of splash screen

  Splash screens

your_splash

A Flutter implementation of splash screen. Supports Android and IOS.

Features

  • Supports splash screen with the Future callback
  • Supports splash screen with timer

Getting Started

To use this library, add your_splash as a dependency in your pubspec.yaml file:

dependencies:
  ...
  your_splash:

In your library add the following import:

import 'package:your_splash/your_splash.dart';

Constructors

This package comes with 2 kinds of splash screen actions:

  • FuturedSplashScreen
  • TimedSplashScreen

You can create a splash screen in two different ways:

  • by calling FuturedSplashScreen or TimedSplashScreen constructor and passing required arguments.
  • by calling SplashScreen.futured or SplashScreen.timed constructor respectively.

FuturedSplashScreen requires next arguments:

ParameterDescription
futureThis is your Future callback for delay
routeThis is a dynamic argument. Can be String name of route or PageRoute instance
bodyThis is a body of your splash screen

TimedSplashScreen requires next arguments:

ParameterDescription
secondsThis is a duration in seconds for how long your splash screen will be displayed
routeThis is a dynamic argument. Can be String name of route or PageRoute instance
bodyThis is a body of your splash screen

Examples

Quick start example:

import 'package:flutter/material.dart';
import 'package:your_splash/your_splash.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen.timed(
        seconds: 3,
        route: MaterialPageRoute(builder: (_) => Home()),
        body: Scaffold(
          body: InkWell(
            child: Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage('https://bit.ly/3hD5Tj8'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home screen!"),
      ),
      body: Center(
        child: Text(
          "Welcome!",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40.0),
        ),
      ),
    );
  }
}

How can I animate transition between the splash screen and navigation page?

Overview
route: PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => Home(),
  transitionDuration: Duration(seconds: 1),
  transitionsBuilder: (_, animation, secAnim, child) {
    var tween = Tween(begin: 0.0, end: 1.0).chain(
      CurveTween(curve: Curves.easeInOutCirc),
    );
    return FadeTransition(
        opacity: animation.drive(tween), child: child);
  },

You can see all examples here

Contribute and download this package source code on GitHub

https://github.com/Dsazz/your_splash

Read more implementation details on pub.dev

https://pub.dev/packages/your_splash