Create a Custom Animated Splash Screen on Flutter
In this tutorial we are going to Animate Flutter Widget without 3rd party package. After completing this sort tutorial, You will be able to animate any widget in your Flutter App.
Getting Started
To continue this tutorial, First of all create a flutter project and open it on VS Code or android Studio.In this tutorial we are going to create an Animated splash screen without 3rd party package to learn Animated Builder easily. Now create a statefull widget into a new dart file and name it splash.dart
Import Packages
We have to import two additional flutter package. Import those packages.
import 'dart:async';import 'dart:math' as math;
Extends Statefull Widget
Animated builder also needs to extends statefull widget with TickerProviderMixin. So let's extends our statefull widget with Ticker Provider Mixin. Add below line on State extends Class of our statefull widget.
with TickerProviderStateMixin
So the code will look like this. Hope you got it.
Add Animation Controller
To control our Animation , we need to create a animation controller variable and give some functionality on it, like the animation duration, repeat etc. Here is our variable. Add this before overriding Widget build context as a late variable.
late final AnimationController _controller =AnimationController(duration: const Duration(seconds: 3), vsync: this)..repeat();
Add dispose State
To destory our animation after the animation ends, we have to dispose the animation. To do this Override the dispose method and animation controller on it.
@overridevoid dispose() {super.dispose();_controller.dispose();}
Add Animation on a Widget
Now lets animate a widget. For this , simply wrap a widget with Animation Builder widget. For this example we are going to animate an image and rotate it 360 degree in an infinity loop.
AnimatedBuilder(
animation: _controller,
builder: (context, child) => Transform.rotate(
angle: _controller.value * 2.0 * math.pi,
child: child,
),
child: Image.asset(
'assets/bacteria.png',
width: 45,
height: 45,
),
)Explanation
First of all we decleared our controller function. Builder takes context and a child to return the animation. And Our animation context is ' Transform and then rotate'. To make it Rotate we need get the actual value and rotate it 180x2 = 360 degree then declear the child.
Navigate to Next Screen
Here is a bonus tips. We are going to navigate next screen after our animation ends. To gain this we are Overriding initstate and set a timer, After finishing the timer it ends enimation and Navigate to next screen but pressing back button will not return again to splash screen. So we have to use push replacement method.
Full Code
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math' as math;
class Splash extends StatefulWidget {
const Splash({super.key});
@override
State<Splash> createState() => _SplashState();
}
class _SplashState extends State<Splash> with TickerProviderStateMixin {
//Animation Controller
late final AnimationController _controller =
AnimationController(duration: const Duration(seconds: 3), vsync: this)
..repeat();
//Timer Function
@override
void initState() {
super.initState();
Timer(
const Duration(seconds: 8),
() => Navigator.pushReplacement(context,
//Change HomePage with your Desire
MaterialPageRoute(builder: (context) => const HomePage())));
}
//Dispose Animation
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child:
//Animation Builder Widget
AnimatedBuilder(
animation: _controller,
builder: (context, child) => Transform.rotate(
angle: _controller.value * 2.0 * math.pi,
child: child,
),
)
)
],
),
);
}
}
Conclusion
In this tutorial we have implimented Animation Builder and Create our custom animation with it. We have learned how to create splash screen and use it on our app. Hope you learned easily. Your response is very help full to me. Don't forget to give your response and reaction. Happy Coding.