May

Flutter Shimmer

Flutter Shimmer:

In this tutorial, we are going to learn to create a shimmer effect. The shimmer effect is some animation effect like the movement of a gradient from left to right. used in Flutter Apps. Think about the ‘Slide to unlock’ animation when you wake up your Phone.

In this tutorial, we are creating two types of shimmer effects in Flutter App:

drawing an opaque gradient area in the top of content layout.
the ‘Slide to unlock’ animation that movement of a gradient from left to right

Follow the below steps to create a shimmer effect in Flutter App:

To create a shimmer effect in flutter we have to add it’s dependency package into the pubspec.yaml file. Use the below code to add the dependency package.

dependencies:

shimmer: ^1.0.0

After adding the dependency package to pubspec.yaml file run the get ppackage method to import all the dependencies. Otherwise it will shows error.

Import the package into your dart file:

Use the below code to import the shimmer package into your dart code. without importing the shimmer package if we use the functionality of the shimmer package it will shows package not found error or exception

import 'package:shimmer/shimmer.dart';

In project directory create asset folder in side this folder create a images sub folder. inside this images sub folder add the images.

for backgroud image
for forward arrow mark image

As shown in below image

After adding the images to asset folder. then go to pubspec.yaml file and un comment the assets and here add the image path as same as we created in the asset folder. like folder/subfilder/ backgroudimage.jpg. As shown in below image.

After adding the image to pubsec.yaml file, now we can use them into our dart code. without adding the image to pubspec.yaml file it will not work or it will shows error.

Creating two title for shimmer effect:

Using below code we are creating two titles in the shimmer app as shown in below

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shimmer'),
),
body: Column(
children: [
ListTile(
title: Text('Loading List'),
onTap: () => Navigator.of(context).pushNamed('loading'),
),
ListTile(
title: Text('Slide To Unlock'),
onTap: () => Navigator.of(context).pushNamed('slide'),
),
],
),
);
}
}

Complete code for Flutter Shimmer Effect:

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Shimmer',
routes: {
'loading': (_) => LoadingListPage(),
'slide': (_) => SlideToUnlockPage(),
},
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shimmer'),
),
body: Column(
children: [
ListTile(
title: Text('Loading List'),
onTap: () => Navigator.of(context).pushNamed('loading'),
),
ListTile(
title: Text('Slide To Unlock'),
onTap: () => Navigator.of(context).pushNamed('slide'),
),
],
),
);
}
}

class LoadingListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading List'),
),
body: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
child: Shimmer.fromColors(
baseColor: Colors.grey[300],
highlightColor: Colors.grey[100],
child: Column(
children: [0, 1, 2, 3, 4, 5, 6]
.map((_) => Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 48.0,
height: 48.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: 40.0,
height: 8.0,
color: Colors.white,
),
],
),
)
],
),
))
.toList(),
),
),
),
);
}
}

class SlideToUnlockPage extends StatelessWidget {
final days = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
];
final months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];

@override
Widget build(BuildContext context) {
final time = DateTime.now();
final hour = time.hour;
final minute = time.minute;
final day = time.weekday;
final month = time.month;
final dayInMonth = time.day;
return Scaffold(
appBar: AppBar(
title: Text('Slide To Unlock'),
),
body: Stack(
fit: StackFit.expand,
children: [
Image.asset(
'assets/images/background.jpg',
fit: BoxFit.cover,
),
Positioned(
top: 48.0,
right: 0.0,
left: 0.0,
child: Center(
child: Column(
children: [
Text(
'${hour < 10 ? '0$hour' : '$hour'}:${minute < 10 ? '0$minute' : '$minute'}', style: TextStyle( fontSize: 60.0, color: Colors.white, ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 4.0), ), Text( '${days[day - 1]}, ${months[month - 1]} $dayInMonth', style: TextStyle(fontSize: 24.0, color: Colors.white), ) ], ), ), ), Positioned( bottom: 24.0, left: 0.0, right: 0.0, child: Center( child: Opacity( opacity: 0.8, child: Shimmer.fromColors( child: Row( mainAxisSize: MainAxisSize.min, children: [ Image.asset( 'assets/images/chevron_right.png', height: 20.0, ), Padding( padding: const EdgeInsets.symmetric(horizontal: 4.0), ), Text( 'Slide to unlock', style: TextStyle( fontSize: 28.0, ), ) ], ), baseColor: Colors.black12, highlightColor: Colors.white, loop: 3, ), ), )) ], ), ); } }

Congratulations You Have Learned Creating Shimmer Effect In Flutter App….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext