Splash Screen using animated_splash_screen package

-

 In this article we will explore about animated splash screen.

            Table of content:

  •   Animated splash screen

  •   Demo

  •   Properties

  •   Code implementation

  •   Conclusion

Animated splash screen: To create an animated splash screen in easiest and fastest way, animated_splash_screen is the package to go with. You need to add its dependency in your pubspec.yaml file.

animated_splash_screen: ^1.1.0

Link of package:

https://pub.dev/packages/animated_splash_screen

Demo:


Properties: 

  • splash: This property takes widget like Icon, Custom widget, Assets image, Url image.

  • duration:  This property takes duration of transition.

  • nextScreen: This property take the screen that we want to show after splash screen.

  • splashTransition: Using this property you can give various transitions that are provided. There are six transitions provided.

  1. rotationTransition

  2. sizeTransition

  3. slideTransition

  4. fadeTransition

  5. decorationBoxTransition

  6. scaleTransition


  • backgroundColor: This property takes the color that we want to give in background.

  • pageTransitionType: This property is used to give animation when our splash screen navigate to next screen.

Code implementation: 

import 'package:animated_splash_screen/animated_splash_screen.dart';

import 'package:flutter/material.dart';

 

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

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        title: 'Clean Code',

        home: AnimatedSplashScreen(

            duration: 3000,

            splash: RichText(

              text: TextSpan(

                text: 'Hello ',

                style: TextStyle(

                    color: Colors.black,

                    fontWeight: FontWeight.w700,

                    fontSize: 40),

                children: <TextSpan>[

                  TextSpan(

                      text: 'Welcome',

                      style: TextStyle(

                          color: Colors.red,

                          fontWeight: FontWeight.w700,

                          fontSize: 40)),

                ],

              ),

            ),

            nextScreen: MainScreen(),

            splashTransition: SplashTransition.rotationTransition,

            backgroundColor: Colors.blue, ));

  }

}

 

class MainScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Home'),

        backgroundColor: Colors.deepPurpleAccent,

      ),

      backgroundColor: Colors.deepPurple[100],

      body: Center(

        child: Container(

          child: Text('Welcome To home Screen'),

        ),

      ),

    );

  }

}


Conclusion: In this blog I have given you the small introduction of animated_splash_screen package. You can design and modify this code according to your choice. 

I hope this blog will provide you the sufficient information about this package. If I got something wrong, let me know in comments, I would like to improve.

Thanks for scrolling down and reading my article.


You can reach me through: https://www.linkedin.com/in/charul-mehta-ba845318b

Comments

Post a Comment

Popular posts from this blog

Introduction Screen using introduction_screen package

-
  In this article we will explore the introduction screen. You might have seen this screen in many applications. Some call this screen a welcome screen, walk through screen, onboarding screen, introduction screen, etc.              Table of content :    Introduction Screen   Demo   Properties   Code implementation   Conclusion Introduction screen : To create an introduction screen in the easiest and fastest way, introduction_screen is the package to go with. You need to add its dependency in your pubspec.yaml file and do pub get. introduction_screen : ^2.1.0 Link of package : https://pub.dev/packages/introduction_screen Demo : Properties :  globalBackgroundColor: This property takes color that we want to show in the background. This color will be the same for all screens. dotDecorator: Using this property we can decorate our dots. It has few properties to decorate dot...
Read more

Transparent app bar and gradient background

-
Image
  In this blog, we will see how to make transparent app bar and how to give gradient background. Transparent app bar and gradient background gives an outstanding look to your application. Demo : To make the app bar transparent you can use the below code. extendBodyBehindAppBar: true, appBar: AppBar (   title: Text ( 'Dashboard' ) ,   leading: Icon (CupertinoIcons. arrow_left ) ,   actions: [     Icon (CupertinoIcons. bell ) ,     SizedBox (width: 10 , ) ,     Icon (CupertinoIcons. add ) ,     SizedBox (width: 10 , )   ] ,   backgroundColor: Colors. transparent ,   elevation: 0 , ) ,   Now, we will make a new stateless class named as GradientBackground(you can give any name of your choice) and in this class we will design the gradient background. Use decoration property inside Container widget, give BoxDecoration and inside it use gradient property. You can give...
Read more