Shimmer Container in Flutter

Flutter - Shimmer

Last Updated : 23 Jul, 2025

In Flutter, Shimmer is used to add beautiful animations while content is loading from the servers in an application. This makes the UI look more responsive and secures users from leaving a slow internet interaction. It can be used instead of conventional ProgressBar or usual loaders available in the Flutter framework.

Steps to implement Shimmer in flutter application

Step 1 : Adding the Dependency

To add the dependency to the pubspec.yaml file, add shimmer as a dependency in the dependencies part of the pubspec.yaml file as shown below:

dependencies:
      shimmer: ^3.0.0

Now run the below command in terminal.

flutter pub get

Step 2 : Importing the Dependency

Use the below line of code in the main.dart file, to import the shimmer dependency :

import 'package:shimmer/shimmer.dart';

Step 3 : Structuring the Application

A StatefulWidget can be extended to create an appbar and a body. This is the homepage that will further navigate to a loading screen on the click of a button. The loading screen will have a shimmer representation, for this follow the code below :

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          title: 'GeeksForGeeks',
          routes: {
            'loading': (_) => LoadingListPage(),
          },
          theme: ThemeData(
            primarySwatch: Colors.green,
          ),
          debugShowCheckedModeBanner: false,
          home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shimmer'),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white
      ),
      body: Column(
        children: [
          ListTile(
            title: const Text('Loading List'),
            onTap: () => Navigator.of(context).pushNamed('loading'),
          ),
        ],
      ),
    );
  }
}

Step 4 : Creating the Loading Screen

The loading screen will be an extension of the StatefulWidget. Inside the body of the loading screen, it's children will have the columns on which the shimmers effect will be implemented as shown below:

Dart

Shimmer.fromColors(
                baseColor: Colors.grey[300],
                highlightColor: Colors.grey[100],
                enabled: _enabled,
                child: ListView.builder(
                  itemBuilder: (_, __) => Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: 
                        )
                      ],
                    ),
                  ),
                  itemCount: 6,
                ),

To know more about listview in flutter refer this article: ListView Class in Flutter

Complete Source Code (main.dart):

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: 'GeeksForGeeks',
			routes: {
				'loading': (_) => LoadingListPage(),
			},
			theme: ThemeData(
				primarySwatch: Colors.green,
			),
			debugShowCheckedModeBanner: false,
			home: MyHomePage(),
		);
	}
}

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

class _MyHomePageState extends State<MyHomePage> {
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: const Text('Shimmer'),
				backgroundColor: Colors.green,
				foregroundColor: Colors.white,
			),
			body: Column(
				children: [
					ListTile(
						title: const Text('Loading List'),
						onTap: () => Navigator.of(context).pushNamed('loading'),
					),
				],
			),
		);
	}
}

class LoadingListPage extends StatefulWidget {
	@override
	_LoadingListPageState createState() => _LoadingListPageState();
}

class _LoadingListPageState extends State<LoadingListPage> {
	bool _enabled = true;

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: const Text('Loading List'),
				backgroundColor: Colors.green,
				foregroundColor: Colors.white,
			),
			body: Container(
				width: double.infinity,
				padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
				child: Column(
					mainAxisSize: MainAxisSize.max,
					children: <Widget>[
						Expanded(
							child: Shimmer.fromColors(
								baseColor: Color.fromARGB(134, 235, 235, 235),
								highlightColor: Color.fromARGB(113, 185, 185, 185),
								enabled: _enabled,
								child: ListView.builder(
									itemBuilder: (_, __) => Padding(
										padding: const EdgeInsets.only(bottom: 8.0),
										child: Row(
											crossAxisAlignment: CrossAxisAlignment.start,
											children: [
												Container(
													width: 48.0,
													height: 48.0,
													color: Colors.white,
												),
												const Padding(
													padding: EdgeInsets.symmetric(horizontal: 8.0),
												),
												Expanded(
													child: Column(
														crossAxisAlignment: CrossAxisAlignment.start,
														children: <Widget>[
															Container(
																width: double.infinity,
																height: 8.0,
																color: Colors.white,
															),
															const Padding(
																padding: EdgeInsets.symmetric(vertical: 2.0),
															),
															Container(
																width: double.infinity,
																height: 8.0,
																color: Colors.white,
															),
															const Padding(
																padding: EdgeInsets.symmetric(vertical: 2.0),
															),
															Container(
																width: 40.0,
																height: 8.0,
																color: Colors.white,
															),
														],
													),
												)
											],
										),
									),
									itemCount: 6,
								),
							),
						),
						Padding(
							padding: const EdgeInsets.symmetric(vertical: 8.0),
							child: ElevatedButton(
								onPressed: () {
									setState(() {
										_enabled = !_enabled;
									});
								},
								child: Text(
									_enabled ? 'Stop' : 'Play',
									style: Theme.of(context).textTheme.labelLarge!.copyWith(
											fontSize: 18.0,
											color: _enabled ? Colors.redAccent : Colors.green),
								),
							),
						)
					],
				),
			),
		);
	}
}

Output:

Create a Shimmer Loading Effect in Flutter with Demo App

Shimmer Container in Flutter

D

ddeevviissaavviittaa

Improve

Article Tags :

Similar Reads

Flutter - Themes

Themes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and n

Shimmer Container in Flutter

A Shimmer Container is the fade-in and fade-out effect, We can show it instead using CircularProgressIndicator or Linear progress indicator that looks decent. While fetching the data from the API or from the database we need to wait as it is an asynchronous process, we need to do something on the us

SliverList in Flutter

In Flutter, with slivers, we can create different scrolling effects. Slivers give an amazing view of the lists when they scroll up or down. The slivers allow us to impact the Lists, Grids scrolling experience. In this article, we will be looking at Slivers features offered by the sliver_tools packag

Tabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To

Flutter - initState()

There are two types of widgets provided in Flutter. The Stateless WidgetThe Stateful Widget As the name suggests Stateful Widgets are made up of some 'States'. The initState() is a method that is called when an object for your stateful widget is created and inserted inside the widget tree. It is bas

Flutter with HTML

Flutter is growing with its libraries and community. Earlier, we could use Machine Learning and Flutter together to create powerful applications. Now, we can combine Flutter and HTML too. If there is a static HTML webpage that we want to render in our application that is built using Flutter. With th