The easiest way to create your animated splash screen in a fully customizable way.

Overview

Animated Splash Screen

Check it out at Pub.Dev

Do it your way

Assets image

ezgif com-video-to-gif (1)

Custom Widget

ezgif com-video-to-gif (4)

Url image

ezgif com-video-to-gif (3)

IconData

ezgif com-video-to-gif (2)

Or just change PageTransition and/or SplashTransition

ezgif com-video-to-gif (5)

Help Maintenance

I've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.

Buy Me A Coffee

Getting Started

To use is simple, just do this:

@override
  Widget build(BuildContext context) {
    return AnimatedSplashScreen(
      splash: 'images/splash.png',
      nextScreen: MainScreen(),
      splashTransition: SplashTransition.rotationTransition,
      pageTransitionType: PageTransitionType.scale,
    );
  }

Splash Parameter

Here, you can pass:

  • String with assets route;
  • String with your url Image, don't forget of pass tag like this "[n]www.my-url.com/my-image.png";
  • IconData;
  • Widget;

SplashTransition

enum SplashTransition {
  slideTransition,
  scaleTransition,
  rotationTransition,
  sizeTransition,
  fadeTransition,
  decoratedBoxTransition
}

PageTransitionType

enum PageTransitionType {
  fade,
  rightToLeft,
  leftToRight,
  upToDown,
  downToUp,
  scale,
  rotate,
  size,
  rightToLeftWithFade,
  leftToRightWithFade,
}

Others:

AnimatedSplashScreen({
    Curve curve = Curves.easeInCirc,
    Future Function() function, // Here you can make something before change of screen
    int duration = 2500,
    @required dynamic splash,
    @required Widget nextScreen,
    Color backgroundColor = Colors.white,
    Animatable customTween,
    bool centered = true,
    SplashTransition splashTransition = SplashTransition.fadeTransition,
    PageTransitionType pageTransitionType = PageTransitionType.downToUp,
 })

With Future Screen

Here you can do something that will return your next screen, ex:

AnimatedSplashScreen.withScreenFunction(
  splash: 'images/splash.png',
  screenFunction: () async{
    return MainScreen();
  },
  splashTransition: SplashTransition.rotationTransition,
  pageTransitionType: PageTransitionType.scale,
)
Comments
  • animated_splash_screen 1.1.0 depends on page_transition 2.0.1-nullsafety.0

    animated_splash_screen 1.1.0 depends on page_transition 2.0.1-nullsafety.0

    Fix this please

    Because animated_splash_screen 1.1.0 depends on page_transition 2.0.1-nullsafety.0 and no versions of animated_splash_screen match >1.1.0 <2.0.0, animated_splash_screen ^1.1.0 requires page_transition 2.0.1-nullsafety.0. So, because fayda depends on both animated_splash_screen ^1.1.0 and page_transition ^2.0.4, version solving failed. pub get failed (1; So, because fayda depends on both animated_splash_screen ^1.1.0 and page_transition ^2.0.4, version solving failed.)

    opened by zakblacki 3
  • Image size is not working

    Image size is not working

    I can't seem to get my splash image to be any bigger.

    splash: Image.asset("assets/images/splash.png",
                        height: 1200, width: 1200),
    

    I'm using version ^1.0.1+2

    opened by maylortaylor 3
  • When using type

    When using type "scale" you need argument: 'alignment'

    try official demo and get :

    When using type "scale" you need argument: 'alignment'
    'package:page_transition/src/page_transition.dart':
    Failed assertion: line 174 pos 16: 'alignment != null'
    屏幕截图 2022-08-10 105428 屏幕截图 2022-08-10 105524

    opened by MoLuoPro 2
  • waiting for update

    waiting for update

    Because app depends on animated_splash_screen 1.1.0 which depends on page_transition 2.0.1-nullsafety.0, page_transition 2.0.1-nullsafety.0 is required. So, because app depends on page_transition ^1.1.7, version solving failed. pub get failed (1; So, because fayda depends on page_transition ^1.1.7, version solving failed.)

    opened by zakblacki 2
  • PageTransitionType  throws an error

    PageTransitionType throws an error

    This is a really useful package & I am using the version (1.0.1+2). But I am facing the problem described as below.

    PageTransitionType.[TYPE] does not work. It throws an error that says: " Undefined name 'PageTranstionType'. Try correcting the name to one that is defined, or defining the name. dart(undefined_identifier) "

    Please resolve this issue. error

    opened by Sharif-Niloy 2
  • Page Transition Type is not working

    Page Transition Type is not working

    No matter what I write for page transition or remove the entire page transition line the output is nothing. Splash animation is working but page transition is not working. I have already imported the page_transition.dart file . I had already added the page transition dependecie and imported the import 'package:page_transition/page_transition.dart'; , but nothing works.

    opened by Franciscof11 1
  • White screen showing before splash screen

    White screen showing before splash screen

    Good day.

    Please could you kindly assist. I'm getting a blank white screen for a few seconds on Android before the actual splash screen loads.

    Regards.

    opened by tinashepb 1
  • All route was down after import this package

    All route was down after import this package

    Exception has occurred. FlutterError (Could not find a generator for route RouteSettings("/MyTeamsScreen", null) in the _WidgetsAppState. Make sure your root app widget has provided a way to generate this route. Generators for routes are searched for in the following order:

    1. For the "/" route, the "home" property, if non-null, is used.
    2. Otherwise, the "routes" table is used, if it has an entry for the route.
    3. Otherwise, onGenerateRoute is called. It should return a non-null value for any valid route not handled by "home" and "routes".
    4. Finally if all else fails onUnknownRoute is called. Unfortunately, onUnknownRoute was not set.)
    opened by goldenmoon67 1
  • code: fixes with typo and removed dead code

    code: fixes with typo and removed dead code

    Thanks for the package. And as I was exploring the widgets, I found few lines to be corrected and also found some dead lines of code. This PR contains all those fixes to the lines which are index for the widgets and also the dead codes are removed.

    opened by sachin-dahal 1
  • Null Check Operator used on a null value

    Null Check Operator used on a null value

    that's what we get when we use your own example, and I see a lot of people talking about that but no response from creators .. so I think this project should be declared as a dead project.

    opened by AhmedWagdi1 1
  • fixed control over duration, lowered min range+doc

    fixed control over duration, lowered min range+doc

    Addition to #5. The conditional for duration was pushing it back to 2000ms when below 1000ms. Users might want more control over the duration (Personal thought, 1000ms was still slow for me).

    • Adjusted the conditional statement, fixing the control over the duration.
    • Adjusted the lower limit from the duration from 1000ms to 100ms.
    • Added more documentation for the parameter duration.
    opened by brunotacca 1
  • Error Occured with Page Transition

    Error Occured with Page Transition

    When using type "scale" you need argument: 'alignment' 'package:page_transition/src/page_transition.dart': Failed assertion: line 174 pos 16: 'alignment != null'

    opened by ssoad 0
  • PageTransitionType is not working....

    PageTransitionType is not working....

    @override Widget build(BuildContext context) { return AnimatedSplashScreen( splash: 'images/splash.png', nextScreen: MainScreen(), splashTransition: SplashTransition.rotationTransition, pageTransitionType: PageTransitionType.scale, //error: Undefined name 'pageTransitionType' ); }

    opened by sadik5397 2
  • PageTransitionType is not working

    PageTransitionType is not working

    No matter what I write for page transition or remove the entire page transition line the output is nothing. Splash animation is working but page transition is not working. I have already imported the page_transition.dart file

    opened by sisirpdl 2
  • Slide Transition Direction

    Slide Transition Direction

    Not sure If I' missed a doc but I cant seem to find out if or how to change the direction the splash transition direction works. In 2 of the examples the icon is coming on from different sides but the code for slideTransition are the same value.

    Can someone tell me how to do this please

    opened by Technorocker 1
Owner
Clean Code
Clean Code
It's a universal app template to have a great animated splash screen and liquid slider. Just change the animation if you want (rive) and change the images or colours according to your app.

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

Zikyan Rasheed 28 Oct 7, 2022
A beautiful and animated Splash Screen UI with Flutter

Flutter Splash Screen Animation, Application Design A part of #flutter100daysofc

Behruz Hurramov 0 Dec 24, 2021
Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file folder.

Flutter UI Boilerplate "Sharing for fun" Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file f

Dimas Ibnu Malik 122 Dec 1, 2022
Use the easiest way to create a dotted line view 👀!

fdottedline Use the easiest way to create a dotted line view ?? ! [FDottedLine] provides developers with the ability to create dashed lines. It also s

Fliggy Mobile 122 Jul 17, 2022
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022
Easiest way to add support for light and dark theme in your flutter app.

Adaptive Theme Easiest way to add support for light and dark theme in your Flutter app. It allows to manually set light or dark theme and also lets yo

Birju Vachhani 287 Dec 27, 2022
This library provides the optimized and easiest way to authenticate with Mastodon's OAuth 2.0 in your Flutter app 🎯

The Optimized and Easiest Way to Integrate OAuth 2.0 with Mastodon API in Flutter ?? 1. Guide ?? 1.1. Getting Started ⚡ 1.1.1. Install Library 1.1.2.

Mastodon.dart 11 Jul 7, 2023
🎮 Style your flutter game with a beautiful splash screen.

Flame Splash Screen Style your flame game with a beautiful splash screen. This package includes a FlameSplashScreen widget. Install Add flame_splash_s

Flame Engine 38 Sep 13, 2022
The easiest way to style custom text snippets in flutter

Super Rich Text Check it out at Pub.Dev The easiest way to style custom text snippets Help Maintenance I've been maintaining quite many repos these da

Woton Sampaio 14 Nov 4, 2022
The easiest way to use navigation, context less and useful methods.

Starlight Utils The easiest way to use navigation, context less and useful methods. Features Name Status Context Less Navigation Service ✅ Context Les

Ye Myo Aung 5 Jul 10, 2022
This library provides the easiest way to integrate Twitter Cards in Flutter web apps 🐦

The Easiest Way to Integrate Twitter Cards into Your Flutter Web App ?? 1. Guide ?? 1.1. Features ?? 1.2. Getting Started ⚡ 1.2.1. Install Library 1.2

Twitter.dart 3 Aug 7, 2022
Authentication + Splash Screen Flutter UI, UI created getting inspired from one share on dribble with flutter

Rest App, with Firebase Auth + SplashScreen UI created getting inspired from one share on dribble with flutter, after getting amazing responce, Added

Sanskar Tiwari 202 Dec 17, 2022
A Flutter Splash Screen For Food Delivery App

newfoodexpress A new Flutter project on board screen or splash screen for any app. But this developed for Food delivery app. Getting Started This proj

Faysal Neowaz 4 Dec 27, 2022
A Flutter implementation of splash screen. Supports Android and IOS.

your_splash A Flutter implementation of splash screen. Supports Android and IOS. Features Supports splash screen with the Future callback Supports spl

Stepanenko Stanislav 6 Sep 27, 2022
A splash screen for flutter, hide when application loaded ,it works on iOS and Android.

flutter_splash_screen A splash screen API for flutter which can programatically hide and show the splash screen. Works on Android and iOS. Content Cha

Devio.org 92 Jan 9, 2023
Flutter Login UI with splash screen and multiple color support

Flutter Login UI It's a #SpeedCode tutorial for Flutter #Login #UI project with

manushikhadka 8 Dec 22, 2022
Flutterkotlinlottie - A sample flutter app illustrating the implementation of a lottie splash screen natively through kotlin

flutter_lottie_splash_app A Flutter application to demonstrate how to add an ani

null 0 Jan 1, 2022
Flutter Splash Screen design and Animation - day 8

Flutter Splash Screen Animation, Application Design A part of #flutter100daysofcode. Let's create a beautiful and animated Splash Screen UI with Flutt

Mohammad Rahmani 266 Dec 29, 2022
Create account, animation transition and animation painter logo splash

flutter_text_form_field This project have a splash screen by using animation and creating profile. Login and Register. Page transition animation App S

Taylan YILDIZ 1 May 2, 2021