Coding with T
  • Home
  • Flutter
    • Flutter Login App
    • Flutter Crash Course
  • Android
    • Products
      • Get A Way
      • Bull’s Rent
    • Basics
    • UI UX
    • Android for Beginners
  • Store
  • Support
  • Contact
Select Page

How to create beautiful splash screen in flutter with animation 2022

by taimoor | Aug 25, 2022 | Flutter, Flutter Login App, Flutter UI / UX, UI UX | 0 comments

Custom Splash screen in flutter with animation - beautiful splash screen - flutter splash screen - 2022

In this flutter custom splash screen tutorial, we will learn how to create a Custom Splash Screen in Flutter with animation 2022 so, I have divided this tutorial into 3 main portions.

  1. Design a splash screen in flutter
  2. Add Animation using Stateful Widget & use Widgets mentioned below
    1. AnimatedPositioned Widget
    2. AnimatedOpacity Widget
  3. Separate Business Logic using GetX

Worthwhile Links

  • Install Android Studio
  • Install Flutter
  • Create a new flutter app
  • Create Folder Structure
  • Setup Theme in Flutter for Light & Dark Mode

This is the tutorial of our Flutter Login App Series.

Complete Course

Watch Youtube tutorial

 

Subscribe us on Youtube

Design Beautiful Splash Screen in Flutter

To create a Custom Splash Screen in flutter we are not going to use Flutter Native Splash but at first, we have to design a beautiful splash screen in flutter.

To Design this splash screen I have divided the screen into 4 parts.

Use Stack & Positioned Widget to layout the screen widgets, therefore, to position the child widgets we have to use Positioned Widget to align them.

Design is divided into 4 parts, Image, Text, Image, and Container.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          const Positioned(
            top: 0,
            left: 0,
            child: Image(image: AssetImage(tSplashTopIcon)),
          ),
          Positioned(
            top: 80,
            left: tDefaultSize,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  tAppName,
                  style: Theme.of(context).textTheme.headline3,
                ),
                Text(
                  tAppTagLine,
                  style: Theme.of(context).textTheme.headline2,
                )
              ],
            ),
          ),
          const Positioned(
            bottom: 100,
            child: Image(image: AssetImage(tSplashImage)),
          ),
          Positioned(
            bottom: 60,
            right: tDefaultSize,
            child: Container(
              width: tSplashContainerSize,
              height: tSplashContainerSize,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                color: tPrimaryColor,
              ),
            ),
          ),
        ],
      ),
    );
  }

Splash Screen in Flutter with animation

To add animation in splash screen, we have to convert our StatlessWidget to StatefulWidget so that, we can add setState() to update widgets at run time.

Note: Its a bad practice to keep both design and logic in the same file. Therefore, we will use GetX State Management in the next step.

Once the design is ready, convert  Positioned widget into AnimatedPositioned Widget. Inside Animated Positioned widget add AnimatedOpactiy Widget for a fade effect.

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  
  bool animate = false;

  @override
  void initState() {
    super.initState();
    startAnimation();
  }

  Future startAnimation() async {
    await Future.delayed(const Duration(milliseconds: 500));
    setState(() { animate = true; });
    await Future.delayed(const Duration(milliseconds: 5000));
    Get.to(const WelcomeScreen());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          AnimatedPositioned(
            duration: const Duration(milliseconds: 1600),
            top: animate ? 0 : -30,
            left: animate ? 0 : -30,
            child: AnimatedOpacity(
              duration: const Duration(milliseconds: 1600),
              opacity: animate ? 1 : 0,
              child: const Image(image: AssetImage(tSplashTopIcon)),
            ),
          ),
          AnimatedPositioned(
            duration: const Duration(milliseconds: 2000),
            top: 80,
            left: animate ? tDefaultSize : -80,
            child: AnimatedOpacity(
              duration: const Duration(milliseconds: 2000),
              opacity: animate ? 1 : 0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    tAppName,
                    style: Theme.of(context).textTheme.headline3,
                  ),
                  Text(
                    tAppTagLine,
                    style: Theme.of(context).textTheme.headline2,
                  )
                ],
              ),
            ),
          ),
          AnimatedPositioned(
            duration: const Duration(milliseconds: 2400),
            bottom: animate ? 100 : 0,
            child: AnimatedOpacity(
              duration: const Duration(milliseconds: 2000),
              opacity: animate ? 1 : 0,
              child: const Image(image: AssetImage(tSplashImage)),
            ),
          ),
          AnimatedPositioned(
            duration: const Duration(milliseconds: 2400),
            bottom: animate ? 60 : 0,
            right: tDefaultSize,
            child: AnimatedOpacity(
              duration: const Duration(milliseconds: 2000),
              opacity: animate ? 1 : 0,
              child: Container(
                width: tSplashContainerSize,
                height: tSplashContainerSize,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  color: tPrimaryColor,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Create Custom Widget for all four parts

As our design keep on growing so, its a best practice to put all the related code into single Custom Widget and use that widget in main Screen.

Download Images

Flutter Native Splash using GetX

In this step, we will move our flutter splash screen logic we created above into GetX.

The purpose of using GetX is simply to seprate business logic from design. Additionally, we can enhance the speed by avoiding the use of Stateful widgets to spare some RAM.

First, add get flutter package as a dependency in your pubspec.yaml file.

dependencies:
  get: [latest-version]

Don’t forget to run flutter pub get.

Customize the following settings and add to your project’s pubspec.yaml file or place in a new file in your root project folder named flutter_native_splash.yaml.

  • splash_screen.dart
  • splash_screen_controller.dart
class SplashScreen extends StatelessWidget {
SplashScreen({Key? key}) : super(key: key);

final splashController = Get.put(SplashScreenController());

@override
Widget build(BuildContext context) {
SplashScreenController.find.startAnimation();

return Scaffold(
body: Stack(
children: [
Obx(
() => AnimatedPositioned(
duration: const Duration(milliseconds: 1600),
top: splashController.animate.value ? 0 : -30,
left: splashController.animate.value ? 0 : -30,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 1600),
opacity: splashController.animate.value ? 1 : 0,
child: const Image(image: AssetImage(tSplashTopIcon)),
),
),
),
Obx(
() => AnimatedPositioned(
duration: const Duration(milliseconds: 2000),
top: 80,
left: splashController.animate.value ? tDefaultSize : -80,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 2000),
opacity: splashController.animate.value ? 1 : 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(tAppName, style: Theme.of(context).textTheme.headline3),
Text(tAppTagLine, style: Theme.of(context).textTheme.headline2)
],
),
),
),
),
Obx(
() => AnimatedPositioned(
duration: const Duration(milliseconds: 2400),
bottom: splashController.animate.value ? 100 : 0,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 2000),
opacity: splashController.animate.value ? 1 : 0,
child: const Image(image: AssetImage(tSplashImage)),
),
),
),
Obx(
() => AnimatedPositioned(
duration: const Duration(milliseconds: 2400),
bottom: splashController.animate.value ? 60 : 0,
right: tDefaultSize,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 2000),
opacity: splashController.animate.value ? 1 : 0,
child: Container(
width: tSplashContainerSize,
height: tSplashContainerSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: tPrimaryColor,
),
),
),
),
),
],
),
);
}
}

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:login_flutter_app/src/features/authentication/screens/welcome/welcome_screen.dart';

class SplashScreenController extends GetxController{
static SplashScreenController get find => Get.find();

RxBool animate = false.obs;

Future startAnimation() async {
await Future.delayed(const Duration(milliseconds: 500));
animate.value = true;
await Future.delayed(const Duration(milliseconds: 5000));
Get.to(const WelcomeScreen());
}
}

Related

Trackbacks/Pingbacks

  1. Flutter OTP Screen UI Example – OTP TextField Code | Coding with T - […] Splash Screen with Animation […]
  2. Flutter Login Screen Design – Modern Login Screen UI | Coding with T - […] Splash Screen with Animation […]

Submit a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe

Recent Posts

  • Overview of Flutter E-commerce App
  • Flutter Login- Flutter Profile Page UI Design – Flutter App Design [2023]
  • Flutter firebase phone authentication with example tutorial 2022
  • Flutter Firebase Authentication Tutorial 2022 using GETX
  • How to setup firebase in flutter – Firebase Setup 2022

Products

  • Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023 Quick Start Flutter Login App
    Rated 5.00 out of 5
    $5.00 – $14.99
  • Login App UI Source Code PRODUCT Thumbnail Latest Login Flutter App UI - Login Flutter App Source Code
    Rated 5.00 out of 5
    $15.00 $9.99
  • Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage Flutter Dashboard Source Code - Flutter UI
    Rated 5.00 out of 5
    $10.00 $5.00
  • complete login android app in android studio 2020 or city guide android app source code by Taimoor sikander - thumbnail Login App for any Android Application
    Rated 5.00 out of 5
    $30.00 $15.00

Categories

android android design android progress bar android studio android studio basic setup android studio tutorials android toutorial for beginners android tutorial for beginners authentication city guide City Guide App City guide dashboard dark theme E-commerce app using Flutter and Firebase firebase firebase authentication flutter flutter basics Flutter E-commerce App Flutter e-commerce app source code Flutter e-commerce app tutorial flutter icons flutter overview Flutter shopping app UI kit flutter ui forget password forget password design form form validation Getx icon image install android studio install flutter learn basics network Organize flutter code OTP phone authentication progress bar setup setup android studio Splash screen store data in firebase textfield

Flutter App development - Coding with T - App Store

Coding with T

Expert App Development, Design, YouTube Tutorials, and a Cutting-Edge App Marketplace, All in One Destination!

Contact Us

Categories

  • Basics
  • UI/UX
  • Material Design
  • Android Firebase
  • Flutter Firebase
  • Flutter Widgets
  • Flutter UI/UX

Courses

  • Flutter Crash Course
  • Flutter Login App

Products

  • Bull’s Rent Android Studio Project
  • Flutter Login App UI
  • Flutter Dashboard Design Source Code
  • Android Login App for any Android Application
  • Flutter Login App

Designed and Developed by Coding with T | Copyright 2023

  • Follow
  • Follow
  • Follow