Splash screen in flutter with basic animation(without vocal)

Let's create a splash screen with flutter framework for IOS and Android with Scale, Slide, Fade transition.

Content:

How to overlay widget using Stack.
How to add color with opacity.
Add logo and add scale animation.
Layout widget using Column and Row.
Add margin for widget using SizedBox or Container.
Material circular buttons with splash color and highlight color.

How to stop rotate widget or screen in flutter.
how to hide debug banner

How to use AnimationController and Animation classes.
How to use ScaleTransition, SlideTransition, FadeTransition widgets.
How to add  and use different fonts.

How to use GestureDetector and InkWell widgets.

Do not contain:

How to respond to different devices screens(add space between logo, description, buttons and signWith). So, if you want to do this, you have few options: easy method is to without adding SizedBox widget to get space in between widgets, wrap those widgets with padding widget and add paddings that you want and in the Column widget use MainAxisAlignment.spaceBetween or there is some other elements read them here:

https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html , https://stackoverflow.com/questions/50430991/center-a-raisedbutton-in-flutter/50432353#50432353

and the boring way to get the screen height using MediaQuery and without removing SizedBox subtract or divide space that you want from device height. Also, you can try this source code:

https://gist.github.com/Blasanka/39b7a78dee922ac681a8af73568d2b1a

Got the initial idea from:
https://graphicriver.net/item/laundry-app-ui-kit/14930436

Source codes:

	/*
	First create a folder inside root directory called *assets* then inside it create another two folders called images and fonts.
	Then add your fonts and images(background with logo)
	*/
	import 'package:flutter/material.dart';
	import 'package:splashscreen_demo/splashscreen.dart';
	void main() => runApp(MyApp());
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	debugShowCheckedModeBanner: false,
	title: 'SplashScreen',
	home: new SplashScreen(),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

	name: splashscreen_demo
	description: A new Flutter project.
	dependencies:
	flutter:
	sdk: flutter
	# The following adds the Cupertino Icons font to your application.
	# Use with the CupertinoIcons class for iOS style icons.
	cupertino_icons: ^0.1.2
	dev_dependencies:
	flutter_test:
	sdk: flutter
	# For information on the generic Dart part of this file, see the
	# following page: https://www.dartlang.org/tools/pub/pubspec
	# The following section is specific to Flutter.
	flutter:
	# The following line ensures that the Material Icons font is
	# included with your application, so that you can use the icons in
	# the material Icons class.
	uses-material-design: true
	# To add assets to your application, add an assets section, like this:
	# assets:
	# - images/a_dot_burr.jpeg
	# - images/a_dot_ham.jpeg
	assets:
	- assets/images/background.jpg
	- assets/images/logo.png
	# An image asset can refer to one or more resolution-specific "variants", see
	# https://flutter.io/assets-and-images/#resolution-aware.
	# For details regarding adding assets from package dependencies, see
	# https://flutter.io/assets-and-images/#from-packages
	# To add custom fonts to your application, add a fonts section here,
	# in this "flutter" section. Each entry in this list should have a
	# "family" key with the font family name, and a "fonts" key with a
	# list giving the asset and other descriptors for the font. For
	# example:
	# fonts:
	# - family: Schyler
	# fonts:
	# - asset: fonts/Schyler-Regular.ttf
	# - asset: fonts/Schyler-Italic.ttf
	# style: italic
	# - family: Trajan Pro
	# fonts:
	# - asset: fonts/TrajanPro.ttf
	# - asset: fonts/TrajanPro_Bold.ttf
	# weight: 700
	#
	# For details regarding fonts from package dependencies,
	# see https://flutter.io/custom-fonts/#from-packages
	fonts:
	- family: OpenSans
	fonts:
	- asset: assets/fonts/OpenSans-Regular.ttf

view raw pubspec.yaml hosted with ❤ by GitHub

	import 'package:flutter/material.dart';
	import 'package:flutter/services.dart';
	class SplashScreen extends StatefulWidget {
	@override
	_SplashScreenState createState() => new _SplashScreenState();
	}
	const TextStyle textStyle = TextStyle(
	color: Colors.white,
	fontFamily: 'OpenSans',
	);
	class _SplashScreenState extends State<SplashScreen>
	with TickerProviderStateMixin {
	AnimationController controller;
	Animation<double> animation;
	@override
	void initState() {
	super.initState();
	controller = AnimationController(
	duration: Duration(milliseconds: 2000),
	vsync: this,
	);
	animation = Tween(begin: 0.0, end: 1.0).animate(controller)
	..addListener(() {
	setState(() {});
	});
	controller.forward();
	}
	@override
	void dispose() {
	super.dispose();
	controller.dispose();
	}
	final background = Container(
	decoration: BoxDecoration(
	image: DecorationImage(
	image: AssetImage('assets/images/background.jpg'),
	fit: BoxFit.cover,
	),
	),
	);
	final greenOpacity = Container(
	color: Color(0xAA69F0CF),
	);
	Widget button(String label, Function onTap) {
	return new FadeTransition(
	opacity: animation,
	child: new SlideTransition(
	position: Tween<Offset>(begin: Offset(0.0, -0.6), end: Offset.zero)
	.animate(controller),
	child: Material(
	color: Color(0xBB00D699),
	borderRadius: BorderRadius.circular(30.0),
	child: InkWell(
	onTap: onTap,
	splashColor: Colors.white24,
	highlightColor: Colors.white10,
	child: Container(
	padding: EdgeInsets.symmetric(vertical: 13.0),
	child: Center(
	child: Text(
	label,
	style: textStyle.copyWith(fontSize: 18.0),
	),
	),
	),
	),
	),
	),
	);
	}
	@override
	Widget build(BuildContext context) {
	SystemChrome.setPreferredOrientations([
	DeviceOrientation.portraitUp,
	DeviceOrientation.portraitDown,
	]);
	final logo = new ScaleTransition(
	scale: animation,
	child: Image.asset(
	'assets/images/logo.png',
	width: 180.0,
	height: 180.0,
	),
	);
	final description = new FadeTransition(
	opacity: animation,
	child: new SlideTransition(
	position: Tween<Offset>(begin: Offset(0.0, -0.8), end: Offset.zero)
	.animate(controller),
	child: Text(
	'Spot the right place to learn guitar lessons.',
	textAlign: TextAlign.center,
	style: textStyle.copyWith(fontSize: 24.0),
	),
	),
	);
	final separator = new FadeTransition(
	opacity: animation,
	child: Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	Container(width: 20.0, height: 2.0, color: Colors.white),
	Padding(
	padding: EdgeInsets.symmetric(horizontal: 8.0),
	child: Text(
	'OR',
	style: textStyle,
	),
	),
	Container(width: 20.0, height: 2.0, color: Colors.white),
	],
	),
	);
	final signWith = new FadeTransition(
	opacity: animation,
	child: Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	Text(
	'Sign in with',
	style: textStyle,
	),
	GestureDetector(
	onTap: () {
	print('google');
	},
	child: Text(
	' Google',
	style: textStyle.copyWith(
	color: Color(0xBB009388),
	fontWeight: FontWeight.bold,
	decoration: TextDecoration.underline),
	),
	),
	Text(' or', style: textStyle),
	GestureDetector(
	onTap: () {
	print('Facebook');
	},
	child: Text(
	' Facebook',
	style: textStyle.copyWith(
	color: Color(0xBB009388),
	fontWeight: FontWeight.bold,
	decoration: TextDecoration.underline),
	),
	),
	],
	),
	);
	return Scaffold(
	body: Stack(
	fit: StackFit.expand,
	children: <Widget>[
	background,
	greenOpacity,
	new SafeArea(
	child: new Padding(
	padding: const EdgeInsets.symmetric(horizontal: 20.0),
	child: Column(
	crossAxisAlignment: CrossAxisAlignment.center,
	children: <Widget>[
	logo,
	SizedBox(height: 30.0),
	description,
	SizedBox(height: 60.0),
	button('Create an account', () {
	print('account');
	}),
	SizedBox(height: 8.0),
	button('Sign In', () {
	print('sign in');
	}),
	SizedBox(height: 30.0),
	separator,
	SizedBox(height: 30.0),
	signWith
	],
	),
	),
	),
	],
	),
	);
	}
	}

view raw splashscreen.dart hosted with ❤ by GitHub

Download OpenSans font here.

Images:

Note: I got the background image only for learning purposes.

Logo image is created by me(free to use):

Learn more:

https://docs.flutter.io/flutter/animation/AnimationController-class.html
https://flutter.io/tutorials/animation/
https://docs.flutter.io/flutter/services/SystemChrome-class.html
https://flutter.io/widgets-intro/
https://flutter.io/widgets/animation/
https://flutter.io/gestures/

Flutter basics for beginners tutorial series with vocal video series:

https://www.youtube.com/playlist?list=PLurs4YIXZ79Cy-8GZc0Y3MAYGRvZNxiVe

Flutter wallpaper by slcoder ego with coding: