Delay-Animation in Flutter

The task is to create a unique animation in a flutter,

so I choose to create one screen which is having delay animation in it, so let's start creating this app, this app contains 2 screens one is a splash screen with an image and text and after 3 seconds of loading it will directly jump to the first page,

for this delay animation, I used the Animationcontroller so on the first page we have a stateful widget with SingleTickerProviderStateMixin

What is SingleTickerProviderStateMixin?

When you add your SingleTickerProviderStateMixin, it tells Flutter that there is some animation in this widget and this widget needs to notified about the animation frames of flutter. The animation controller is one of the basic things necessary for creating effects in a flutter app flutter.SingleTickerProviderStateMixin<T extends StatefulWidget> mixin

splashscreen

first we have to install package for splash screen in pubspec.yaml file

splashscreen: ^1.2.0

• creating a file in lib -splash.dart in this import the package for splash screen

in the splash screen, I used one image of Linux which I used from assets create an assets folder inside that put the png file

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'main.dart';
class SplashOne extends StatefulWidget {
@override
_SplashOneState createState() => new _SplashOneState();
}
class _SplashOneState extends State<SplashOne> {
@override
Widget build(BuildContext context) {
return SplashScreen(
image: Image.asset('assets/linux.png'),
seconds: 8,
navigateAfterSeconds: FirstPage(),
backgroundColor: Color(0xFF8185E2),
styleTextUnderTheLoader: new TextStyle(),
photoSize: 100.0,
//   onClick: () => print("Flutter Egypt"),
loaderColor: Colors.white,
title: Text(
"Linux ",
style: TextStyle(
fontSize: 28.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
));
}
}

so lets start with the first page which contains the animation part ,in this page I have used a glow effect on an image and the rest will be the text and button, this app is mostly inspired by the reflectly app I have tried to add animation like this app, in the main. dart file I have a class name which is FirstPage, a stateful widget with SingleTickerProviderStateMixin, here I create one variable delayed amount for main. dart file as follows

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:reflectlylikeapp/delayed_animation.dart';
import 'package:avatar_glow/avatar_glow.dart';
import 'package:reflectlylikeapp/splash.dart';
//import 'package:http/http.dart';
void main() {
//TestWidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "mysplash",
routes: {
"mysplash": (context) => SplashOne(),
}));
}
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage>
with SingleTickerProviderStateMixin {
final int delayedAmount = 500;
double _scale;
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(
milliseconds: 200,
),
lowerBound: 0.0,
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
super.initState();
}
@override
Widget build(BuildContext context) {
final color = Colors.white;
_scale = 1 - _controller.value;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color(0xFF8185E2),
body: Center(
child: Column(
children: <Widget>[
AvatarGlow(
endRadius: 90,
duration: Duration(seconds: 2),
glowColor: Colors.white24,
repeat: true,
repeatPauseDuration: Duration(seconds: 2),
startDelay: Duration(seconds: 1),
child: Material(
elevation: 8.0,
shape: CircleBorder(),
child: CircleAvatar(
backgroundColor: Colors.transparent,
backgroundImage: NetworkImage(
'https://raw.githubusercontent.com/dazzeller/pandaimg/master/panda.jpg'),
radius: 50.0,
)),
),
DelayedAnimation(
child: Text(
"Hi There",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
color: color),
),
delay: delayedAmount + 1000,
),
DelayedAnimation(
child: Text(
"I'm Linux",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
color: color),
),
delay: delayedAmount + 2000,
),
SizedBox(
height: 30.0,
),
DelayedAnimation(
child: Text(
"Your New Personal",
style: TextStyle(fontSize: 20.0, color: color),
),
delay: delayedAmount + 3000,
),
DelayedAnimation(
child: Text(
"Remote Terminal",
style: TextStyle(fontSize: 20.0, color: color),
),
delay: delayedAmount + 3000,
),
SizedBox(
height: 100.0,
),
DelayedAnimation(
child: GestureDetector(
onTapDown: _onTapDown,
onTapUp: _onTapUp,
child: Transform.scale(
scale: _scale,
child: _animatedButtonUI,
),
),
delay: delayedAmount + 4000,
),
SizedBox(
height: 50.0,
),
DelayedAnimation(
child: Text(
"I Already have An Account",
style: TextStyle(
fontSize: 10.0,
fontWeight: FontWeight.bold,
color: color),
),
delay: delayedAmount + 5000,
),
],
),
)
//  Column(
//   mainAxisAlignment: MainAxisAlignment.center,
//   children: <Widget>[
//     Text('Tap on the Below Button',style: TextStyle(color: Colors.grey[400],fontSize: 20.0),),
//     SizedBox(
//       height: 20.0,
//     ),
//      Center(
//   ),
//   ],
// ),
),
);
}
Widget get _animatedButtonUI => Container(
height: 60,
width: 270,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
color: Colors.white,
),
child: Center(
child: Text(
'Get Started',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Color(0xFF8185E2),
),
),
),
);
void _onTapDown(TapDownDetails details) {
_controller.forward();
}
void _onTapUp(TapUpDetails details) {
_controller.reverse();
}
}

here is the splash screen and the delay animation on the first page

splash screen

animated UI (delay animation)

Thank you for reading!!