DEV Community

loading...
Cover image for Creating a LockScreen UI using Shimmer effect for text.

Creating a LockScreen UI using Shimmer effect for text.

cosmogir1 profile image Namita Shetty ・2 min read

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.

Alt Text

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.

Alt Text

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.)

Alt Text

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.

This is the final code for main.dart

Shimmer effect

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.❤❤

Discussion (2)

pic
Editor guide
Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

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

Collapse
cosmogir1 profile image
Namita Shetty Author

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