FLUTTER: SPLASH SCREEN
ANIMATION

Hello there friends , Welcome to the flutter blog.

Making an application that has the minimal UI is just not enough when it comes to attracting the audience and that's where the animation comes into focus. Animation has always been the key part of any application. Whether it is in the starting of the application or when some activity changing. Animation helps developers a lot to gain user attraction.

So today I came up with this beautiful animation widget which just blew my mind. In Flutter, everything is a widget. I just needed my logo to have an animation that has a fade in property is in Splash Screen activity when the app opens. I searched for many things as I myself have just started to learn Flutter. I just Ended up using this animation which is way better than I thought.

Just check out this link it has the animation and motion widget which are just so awesome and can make your application more beautiful.

https://flutter.dev/docs/development/ui/widgets/animation

Let's get started.
Open Android studio, and create a new Flutter project. The name can be as per you want I have given "FadeIn.dart".

If you don't have Android studio you can also use VS Code and install the extensions (dart and flutter). and then you can start by creating the new project.

After creating the project you will get the by default code to get started with flutter. Just delete all the code from that file and just paste the below code.

import 'dart:async’; import 'package:flutter/material.dart’;
void main() => runApp(SplashScreen());
class SplashScreen extends StatefulWidget {
@override State<StatefulWidget> createState() => FadeIn();}

class FadeIn extends State<SplashScreen> {
Timer _timer; FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;
FadeIn() {
_timer = new Timer(const Duration(seconds: 2), () {
setState(() {
_logoStyle = FlutterLogoStyle.horizontal; }); }); }

@override Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: new FlutterLogo(
size: 200.0, style: _logoStyle, ), ), ), ), ); }
}

Explanation of the code.
So here, we have a SplashScreen class which extends StatefulWidget. Which then overrides the createState() function and call the next State Class FadeIn which extends State<SplashScreen>.

The Main working is in the FadeIn Class which has a constructor FadeIn(). In that constructor, we have an object of class Timer.
The _timer does the work the same as the thread where u can run the thread on UI.

In that function is has an inbuilt function called setState(), which helps you to call when you need to update something in the app.
It may be just going from one activity to another or just updating the listview to get the updated list. So we have a variable _logoStyle which holds the value of the animation. it will be called after 2 seconds because the duration we have given to the timer is of 2 seconds.

Then there is the build() Method where the designing of the app is done. it has the material app design which has a Scaffold (used for a blank screen). the scaffold has the body having the center function and container as the child of the center.

So now here comes the main thing there's a by default image widget is given by the Flutter "FlutterLogo". Now, this function has a couple of properties such as size, style, transform.etc.

we have used the two properties size which represents the size of the logo and the style which represents the animation value held in the variable _logoStyle.

Execution,
Once the code has been copied properly, just Start the emulator or you can connect to the physical device and run the app.
And there you get the beautiful animation.

I got something wrong? Mention it in the comments.
I would love to improve.

I hope you enjoyed this post. I will also come up with some more blogs.
Have a Nice Day.✌️