Flutter Splash Screen Example – In this tutorial I have explained how implement flutter splash screen animation example for when open the android application in our mobile phone. Nowadays every app has splash screen, because it’s used for showing the app logo, introduction, offers, and more reasons. That’s why most of developers create splash screen concept in all projects.
Currently most of developers are like to create splash screen example. Because clients also looking for those changes when they are saw in other application. For example Swiggy, Flipkart, Amazon apps are showing Splash screen for initial time when we install the application. After that splash page not working and the objective is simple definition about particular application.
Using the java, I have published one article Splash Screen Java | Android Studio. May be it will be helped for your future reference. So here I would like mentioned about that article. After go through so many article finally you get clear idea like how customize the projects. Because splash screen is now used by every application and via this we simply explain the application summary. That’s why most of developers are looking for Flutter Splash Screen Source code in android studio platform.
Create Project
In every concept, source code & demo available on official website. Suppose if you want to develop splash screen in react native, then we have to check and get idea about implementation. After that only read other developers code to improve our projects. Here dart also provide official demonstration for Advanced Splash Screen UI using Dart language.
So once read about above tutorial and come to on this article for improved animated splash screen with features. Always official codes are best to follow because less code & fastest processing when compared external libraries integration. In below I have add Dart programming language code, and if you are beginner then once read the official documentation for more clarification.
Splash Screen Screenshot
Once check the below screenshot after that you get some idea like how customize & mange the code. Because beginning only hard to find out the code. After going few month we are the master in particular subject or technology.
import 'package:day8_splash/Animations/FadeAnimation.dart';
import 'package:day8_splash/LoginPage.dart';
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage()
)
);
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin{
AnimationController _scaleController;
AnimationController _scale2Controller;
AnimationController _widthController;
AnimationController _positionController;
Animation<double> _scaleAnimation;
Animation<double> _scale2Animation;
Animation<double> _widthAnimation;
Animation<double> _positionAnimation;
bool hideIcon = false;
@override
void initState() {
// TODO: implement initState
super.initState();
_scaleController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300)
);
_scaleAnimation = Tween<double>(
begin: 1.0, end: 0.8
).animate(_scaleController)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_widthController.forward();
}
});
_widthController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 600)
);
_widthAnimation = Tween<double>(
begin: 80.0,
end: 300.0
).animate(_widthController)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_positionController.forward();
}
});
_positionController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1000)
);
_positionAnimation = Tween<double>(
begin: 0.0,
end: 215.0
).animate(_positionController)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
setState(() {
hideIcon = true;
});
_scale2Controller.forward();
}
});
_scale2Controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300)
);
_scale2Animation = Tween<double>(
begin: 1.0,
end: 32.0
).animate(_scale2Controller)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: LoginPage()));
}
});
}
@override
Widget build(BuildContext context) {
final double width = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Color.fromRGBO(3, 9, 23, 1),
body: Container(
width: double.infinity,
child: Stack(
children: <Widget>[
Positioned(
top: -50,
left: 0,
child: FadeAnimation(1, Container(
width: width,
height: 400,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/one.png'),
fit: BoxFit.cover
)
),
)),
),
Positioned(
top: -100,
left: 0,
child: FadeAnimation(1.3, Container(
width: width,
height: 400,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/one.png'),
fit: BoxFit.cover
)
),
)),
),
Positioned(
top: -150,
left: 0,
child: FadeAnimation(1.6, Container(
width: width,
height: 400,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/one.png'),
fit: BoxFit.cover
)
),
)),
),
Container(
padding: EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(1, Text("Welcome",
style: TextStyle(color: Colors.white, fontSize: 50),)),
SizedBox(height: 15,),
FadeAnimation(1.3, Text("We promis that you'll have the most \nfuss-free time with us ever.",
style: TextStyle(color: Colors.white.withOpacity(.7), height: 1.4, fontSize: 20),)),
SizedBox(height: 180,),
FadeAnimation(1.6, AnimatedBuilder(
animation: _scaleController,
builder: (context, child) => Transform.scale(
scale: _scaleAnimation.value,
child: Center(
child: AnimatedBuilder(
animation: _widthController,
builder: (context, child) => Container(
width: _widthAnimation.value,
height: 80,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blue.withOpacity(.4)
),
child: InkWell(
onTap: () {
_scaleController.forward();
},
child: Stack(
children: <Widget> [
AnimatedBuilder(
animation: _positionController,
builder: (context, child) => Positioned(
left: _positionAnimation.value,
child: AnimatedBuilder(
animation: _scale2Controller,
builder: (context, child) => Transform.scale(
scale: _scale2Animation.value,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue
),
child: hideIcon == false ? Icon(Icons.arrow_forward, color: Colors.white,) : Container(),
)
),
),
),
),
]
),
),
),
),
)),
)),
SizedBox(height: 60,),
],
),
)
],
),
),
);
}
}
The project output image files are available on source code files. So click below button to get the source code and then open the image files. If you are not satisfied or get any issues just contact us for clarify your problem in our end.
Flutter Splash Screen Example Source Code
I hope above steps are very useful to develop flutter native splash screen animation example using dart. Already I told splash screen is must for every project so don’t skip this concept. Most of clients also demand this queries in their projects. In java it’s little bit difficult but here not like that, we can easily make attractive splash screen in our flutter application. So if face any error, comment below I will solve your bugs within a days. We are always online to help our blog readers n efficient ways.