Flutter UI | 43 | 2. Splash Screen | Shimmer

Here is the video tutorial

Code

main.dart

import 'package:flutter/material.dart';

import 'package:splash_screen_2/splashscreen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Flutter Demo',

theme: ThemeData(

primaryColor: Color(0xFF832685),

primaryColorLight: Color(0xFFC81379),

accentColor: Color(0xFFFAF2FB),

),

home: SplashScreen(),

);

}

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

String title = 'HomePage';

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(title),

centerTitle: true,

),

body: Center(

child: Text(

'The Tech Designer',

style: TextStyle(

fontSize: 32.0,

fontWeight: FontWeight.bold,

fontStyle: FontStyle.italic,

color: Colors.orangeAccent),

),

),

);

}

}

splashScreen.dart

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:shimmer/shimmer.dart';

import 'package:splash_screen_2/images.dart';

import 'package:splash_screen_2/main.dart';

class SplashScreen extends StatefulWidget {

SplashScreen({Key key}) : super(key: key);

@override

_SplashScreenState createState() => _SplashScreenState();

}

class _SplashScreenState extends State<SplashScreen> {

@override

void initState() {

super.initState();

Timer(

Duration(seconds: 5),

() => Navigator.push(

context,

MaterialPageRoute(

builder: (context) => MyHomePage(),

),

),

);

}

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Container(

child: Stack(

alignment: Alignment.center,

children: <Widget>[

Opacity(

// opacity: 0.2,

// // With Background Image

// child: Image(

// image: AssetImage(captainMarvel),

// height: 800.0,

// fit: BoxFit.fitHeight,

// ),

// With Background Color

opacity: 0.4,

child: Container(color: Colors.red,),

),

Shimmer.fromColors(

period: Duration(seconds: 2),

baseColor: Color(0xFF832685),

highlightColor: Color(0xFFC81379),

child: Text(

'The Tech Designer',

style: TextStyle(

fontSize: 42.0,

fontWeight: FontWeight.bold,

fontStyle: FontStyle.italic,

shadows: <Shadow>[

Shadow(

color: Colors.black87,

blurRadius: 20.0,

offset: Offset.fromDirection(125.15),

),

],

),

),

),

],

),

),

),

);

}

}

images.dart

const String captainMarvel = "assets/images/captainMarvel.jpg";

Don’t Forgot to add package in pubspec.yaml

shimmer: ^1.1.1