=2.1.0 <3.0.0" Add dependency in pubspec.yaml dependencies: animated_" /> =2.1.0 <3.0.0" Add dependency in pubspec.yaml dependencies: animated_" /> =2.1.0 <3.0.0" Add dependency in pubspec.yaml dependencies: animated_"/>

A light weight package for flutter apps, that easily shows a splash screen with a nice fade animation.

Overview

Animated Splash Screen

Using the package

Get the library

environment:
  sdk: ">=2.1.0 <3.0.0"

Add dependency in pubspec.yaml

dependencies:
  animated_splash: ^1.0.0

Things to do

  1. Get a logo for your app
  2. Prepare what to execute while the splash screen is shown (initializing your db, shared preferences, firebase...etc)
  3. Screen to be shown after splash screen and background process
  4. Duration of Splash Screen

Import the package

import 'package:animated_splash/animated_splash.dart';

Show splash screen for some duration

  type: AnimatedSplashType.StaticDuration

Inside your main function, use home as SplashScreen(_), the parameters are as follows:

imagePath: Path to your app-logo/image home: Screen to be shown after splash duration: duration of splash screen in milliseconds type

runApp(MaterialApp(
  home: AnimatedSplash(
              imagePath: 'assets/flutter_icon.png',
              home: Home(),
              duration: 2500,
              type: AnimatedSplashType.StaticDuration,
            ),
));

Execute a function in background and based on the value from that function navigate to different screen

  type: AnimatedSplashType.BackgroundProcess

Create an object of Function that gets executed while splash screen is shown

Function duringSplash = () {
  //Write your code here
  ...
  return value;
};

Create routes according to your function return value

  //setup the return value correctly for proper navigation
  Map<dynamic, Widget> returnValueAndHomeScreen = {1: Home(), 2: HomeSt()};

Inside your main function, use home as SplashScreen(_), the parameters are as follows:

imagePath: Path to your app-logo/image home: Screen to be shown after splash customFunction: the function you have written above duration: duration of splash screen in milliseconds type output value of customFunction and home screen to navigate(Map function)

runApp(MaterialApp(
  home: AnimatedSplash(
              imagePath: 'assets/flutter_icon.png',
              home: Home(),
              customFunction: duringSplash,
              duration: 2500,
              type: AnimatedSplashType.BackgroundProcess,
              outputAndHome: op,
            ),
));

Demo

ProgressDialog Demo

Comments
  • The builder for route

    The builder for route "null" returned null

    I got the next code ` void main() { Function duringSplash = () async { Auth _auth = new Auth(); if (await _auth.isLoggedIn()) { return 1; } else { return 2; } };

    Map<dynamic, Widget> op = {1: Login(), 2: BottomNavBar()};

    runApp( MaterialApp( home: AnimatedSplash( home: Login(), imagePath: 'images/image1.jpg', customFunction: duringSplash, type: AnimatedSplashType.BackgroundProcess, outputAndHome: op, duration: 1000, ), )); } `

    It returns I/flutter ( 5159): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter ( 5159): The following assertion was thrown building Builder(dirty): I/flutter ( 5159): The builder for route "null" returned null. I/flutter ( 5159): Route builders must never return null.

    It says it should be an error on my runApp statement. But im doing exactly as your document says.

    opened by IvanMtze 4
  • code fixes for ease

    code fixes for ease

    Hello Sir... First of all, thank you for this amazing package to implement an animated splash screen to the flutter app. This PR is created to change certain names with the relevant ones that everyone prefers to use. A minor refactoring is done in the code just for the ease of every developer out there.

    Thank You!

    opened by sachin-dahal 1
  • Image Size Problem

    Image Size Problem

    I wan my image in AnimatedSplash to fit full screen. How can I do that?

    AnimatedSplash( imagePath: 'assets/ss.gif', customFunction: playSound, duration: 4000, home: SecondScreen(), outputAndHome: output, type: AnimatedSplashType.BackgroundProcess, ),

    opened by AreebaJawed 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 6% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /splash_demo.gif | 524.63kb | 491.74kb | 6.27% | | /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 10.85kb | 10.68kb | 1.62% | | | | | | | Total : | 535.48kb | 502.42kb | 6.17% |


    Black Lives Matter | 💰 donate | 🎓 learn | ✍🏾 sign

    📝 docs | :octocat: repo | 🙋🏾 issues | 🏅 swag | 🏪 marketplace

    opened by imgbot[bot] 0
  • how can i change the background color of the splash screen ?

    how can i change the background color of the splash screen ?

    void main() { runApp(MaterialApp( home: AnimatedSplash( imagePath: 'assets/images/Libya-logo.png', home: MyApp(), duration: 2500, type: AnimatedSplashType.StaticDuration, customFunction: () { return null; }, ), )); }

    opened by AbdullahElamir 1
  • Every time I start an web app, where I have AnimatedSplash as a Splash screen, I get an error.

    Every time I start an web app, where I have AnimatedSplash as a Splash screen, I get an error.

    flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel beta, 1.25.0-8.1.pre, on Microsoft Windows [Version 10.0.19042.685], locale en-US) [√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [√] Chrome - develop for the web [√] Android Studio (version 4.1.0) [√] Connected device (2 available)

    • No issues found!

    This is the error:

    The following assertion was thrown while finalizing the widget tree: _AnimatedSplashState#c4b49(ticker active but muted) was disposed with an active Ticker.

    _AnimatedSplashState created a Ticker via its SingleTickerProviderStateMixin, but at the time dispose() was called on the mixin, that Ticker was still active. The Ticker must be disposed before calling super.dispose().

    Tickers used by AnimationControllers should be disposed by calling dispose() on the AnimationController itself. Otherwise, the ticker will leak.

    The offending ticker was: Ticker(created by _AnimatedSplashState#c4b49(lifecycle state: created)) The stack trace when the Ticker was actually created was:

    *Here in between, a great amount of links to different files like : " packages/flutter/src/scheduler/ticker.dart , packages/flutter/src/animation/animation_controller.dart, packages/flutter/src/widgets/framework.dart"

    As I understand, the main lines causing error are:

    packages/flutter/src/scheduler/ticker.dart 67:40 packages/flutter/src/scheduler/ticker.dart 68:14 new packages/flutter/src/widgets/ticker_provider.dart 129:15 createTicker packages/flutter/src/animation/animation_controller.dart 247:20 new packages/animated_splash/animated_splash.dart 49:32

    Error: Looking up a deactivated widget's ancestor is unsafe. At this point the state of the widget's element tree is no longer stable. To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling dependOnInheritedWidgetOfExactType() in the widget's didChangeDependencies() method. at Object.throw_ [as throw] (http://localhost:52766/dart_sdk.js:4354:11) at http://localhost:52766/packages/flutter/src/widgets/widget_span.dart.lib.js:24929:21 at framework.StatefulElement.new.[_debugCheckStateIsActiveForAncestorLookup] (http://localhost:52766/packages/flutter/src/widgets/widget_span.dart.lib.js:24932:23) at framework.StatefulElement.new.findAncestorStateOfType (http://localhost:52766/packages/flutter/src/widgets/widget_span.dart.lib.js:25021:69) at Function.of (http://localhost:52766/packages/flutter/src/widgets/widget_span.dart.lib.js:21262:63) at http://localhost:52766/packages/animated_splash/animated_splash.dart.lib.js:328:29 at _RootZone.runUnary (http://localhost:52766/dart_sdk.js:37854:58) at _FutureListener.then.handleValue (http://localhost:52766/dart_sdk.js:32815:29) at handleValueCallback (http://localhost:52766/dart_sdk.js:33363:49) at Function._propagateToListeners (http://localhost:52766/dart_sdk.js:33401:17) at _Future.new.[_complete] (http://localhost:52766/dart_sdk.js:33234:25) at http://localhost:52766/dart_sdk.js:32381:30 at internalCallback (http://localhost:52766/dart_sdk.js:24144:11)

    opened by rednikisfun 1
  • Splash image is small

    Splash image is small

    Hi guys, could you help me? The splash image is small leaving other space white blank. image

    code is: home: AnimatedSplash( imagePath: 'static/img/splash.png', home: IndexPage(), customFunction: duringSplash, duration: 2500, type: AnimatedSplashType.BackgroundProcess, outputAndHome: returnValueAndHomeScreen, ),

    opened by ewanyuan 1
  • How to change text and loading icon color which is showing below logo ?

    How to change text and loading icon color which is showing below logo ?

    I am using it like below.

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return AnimatedSplash(
          imagePath: 'assets/images/logo.png',
          home: AfterSplash(context),
          duration: 2500,
          type: AnimatedSplashType.BackgroundProcess,
        );
      }
    }
    
    
    opened by piyush303 1
Owner
Mohammad Fayaz
Android | Backend Dev
Mohammad Fayaz
A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

Custom Splash Screen A Flutter package to custom splash screen: change logo icon, logo animation, and splash screen background color. (Custom from ani

tranhuycong 78 Sep 6, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Mohammad Fayaz 202 Dec 11, 2022
Facilitator for having a Splash Screen with a Flare animation

flare_splash_screen Facilitator for having a Splash screen with a Flare animation until some work has been done for the initialization of the app If y

Jimmy Aumard 94 Oct 6, 2022
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 20 Dec 3, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

null 10 Nov 28, 2022
Change Application's name, package name, icon and Splash in one shot by one Command on Android & IOS

Change Application's name, package name, icon and Splash in one shot by one Command on Android & IOS. Installing dart pub global activate before_publi

null 10 Oct 27, 2022
A Flutter widget that easily adds the flipping animation to any widget

flip_card A component that provides a flip card animation. It could be used for hiding and showing details of a product. How to use import 'package:fl

Bruno Jurković 314 Dec 31, 2022
Onboarding Screen,Alert & Lottie Animation Example.

rehberapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Hüseyin BAKAR 0 Dec 30, 2021
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

null 3 Dec 8, 2021
A mobile cinema App for customers to book a sit and view upcoming shows

?? ?? Booking Theater ✨ Requirements Any Operating System (ie. MacOS X, Linux, Windows) Any IDE with Flutter SDK installed (ie. IntelliJ, Android Stud

Olajire Abdullah 3 Nov 17, 2022
A Flutter package for easily implementing Material Design navigation transitions.

Morpheus A Flutter package for easily implementing Material Design navigation transitions. Examples Parent-child transition You can use MorpheusPageRo

Sander R. D. Larsen 186 Jan 7, 2023