Creating a LockScreen UI using Shimmer effect for text.

In this tutorial,We are going to design UI for a lockscreen using shimmer effect.Being an app developer you might have come across situations where you need to design a UI with amazing text effects.So that's where Shimmer effect comes into picture.

So first of all,we need to install the shimmer package by adding the following code under dependencies in pubspec.yaml file as shown below.

Now save the file and go to main.dart file and import the shimmer package using

import "package:shimmer/shimmer.dart";

In our UI we are going to display the date and time on the wallpaper and then at the end of the screen we will show "swipe to unlock".

So let's begin.

We will delete the code in MyHomePage() Class and define that class in the way we want.So we will return a Card Widget within Container which will have a child as an Stack Widget since we want to display one widget over the other (Text over Image) So in children: we will first display the image.

	class MyHomePage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Container(
	child: Card(
	child: Stack(children: <Widget>[
	Image.network(
	"https://149398021.v2.pressablecdn.com/wp-content/uploads/2019/12/clouds25.jpg",
	fit: BoxFit.cover,
	width: MediaQuery.of(context).size.width,
	),
	]),
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

Now we need to add time ,date and day in between on the image.So we will use Padding Widget to have some padding and then use Text Widget to show day,date and time.Here I have directly written the date,day and time.But you can format the time,date etc. using intl package.(You can learn about how to use intl package from here.)

	class MyHomePage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Container(
	child: Card(
	child: Stack(children: <Widget>[
	Image.network(
	"https://149398021.v2.pressablecdn.com/wp-content/uploads/2019/12/clouds25.jpg",
	fit: BoxFit.cover,
	width: MediaQuery.of(context).size.width,
	),
	ListView(
	children: <Widget>[
	Padding(
	padding: EdgeInsets.only(
	top: 200,
	left: 150,
	),
	child: Text(
	"2:26",
	style: TextStyle(
	fontSize: 40,
	),
	),
	),
	Padding(
	padding: EdgeInsets.only(top: 10, left: 110),
	child: Text(
	"Friday,16 October",
	style: TextStyle(
	fontSize: 20,
	),
	),
	),
	],
	),
	]),
	),
	// ,
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

Now we will use shimmer effect on text "Swipe to unlock".The syntax for using it is Shimmer.fromColors() where you need to define the baseColor,highlightColor, child. So now we will wrap the text widget within the padding widget so that the text appears at bottom of screen and we will also format the text using fontSize and fontStyle as shown below.

	class MyHomePage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Container(
	child: Card(
	child: Stack(children: <Widget>[
	Image.network(
	"https://149398021.v2.pressablecdn.com/wp-content/uploads/2019/12/clouds25.jpg",
	fit: BoxFit.cover,
	width: MediaQuery.of(context).size.width,
	),
	ListView(
	children: <Widget>[
	Padding(
	padding: EdgeInsets.only(
	top: 200,
	left: 150,
	),
	child: Text(
	"2:26",
	style: TextStyle(
	fontSize: 40,
	),
	),
	),
	Padding(
	padding: EdgeInsets.only(top: 10, left: 110),
	child: Text(
	"Friday,16 October",
	style: TextStyle(
	fontSize: 20,
	),
	),
	),
	Padding(
	padding: EdgeInsets.only(top: 300, left: 80),
	child: Shimmer.fromColors(
	child: Text(">>Swipe to unlock",
	style: TextStyle(
	fontSize: 30,
	fontWeight: FontWeight.bold,
	)),
	baseColor: Colors.black,
	highlightColor: Colors.white),
	)
	],
	),
	]),
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

This is the final code for main.dart

	import 'package:flutter/material.dart';
	import "package:shimmer/shimmer.dart";
	void main() {
	runApp(MyApp());
	}
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter Demo',
	theme: ThemeData(
	primarySwatch: Colors.purple,
	visualDensity: VisualDensity.adaptivePlatformDensity,
	),
	home: MyHomePage(),
	);
	}
	}
	class MyHomePage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Container(
	child: Card(
	child: Stack(children: <Widget>[
	Image.network(
	"https://149398021.v2.pressablecdn.com/wp-content/uploads/2019/12/clouds25.jpg",
	fit: BoxFit.cover,
	width: MediaQuery.of(context).size.width,
	),
	ListView(
	children: <Widget>[
	Padding(
	padding: EdgeInsets.only(
	top: 200,
	left: 150,
	),
	child: Text(
	"2:26",
	style: TextStyle(
	fontSize: 40,
	),
	),
	),
	Padding(
	padding: EdgeInsets.only(top: 10, left: 110),
	child: Text(
	"Friday,16 October",
	style: TextStyle(
	fontSize: 20,
	),
	),
	),
	Padding(
	padding: EdgeInsets.only(top: 300, left: 80),
	child: Shimmer.fromColors(
	child: Text(">>Swipe to unlock",
	style: TextStyle(
	fontSize: 30,
	fontWeight: FontWeight.bold,
	)),
	baseColor: Colors.black,
	highlightColor: Colors.white),
	)
	],
	),
	]),
	),
	// ,
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

You can also watch my video tutorial if you like learning from videos:)

If you found this tutorial useful, you know what to do now. Hit that like button and follow me to get more articles and tutorials on your feed.❤❤

Comments

[Vaibhav Khulbe]

Good work!! The shimmer effect was highly popularised by Facebook when they started implementing it in their home feed.

[Codeitout]

Thank you 😊
That's something new which I got to know today :)