Creating Shimmer Loading Effect in Flutter

shimmer efffect

Loading data from an API or Firebase can sometimes take a few seconds, leaving users staring at a blank screen. To enhance the user experience, adding a shimmer effect can provide visual feedback that something is happening in the background. In this tutorial, we’ll explore how to integrate a shimmer loading effect in a Flutter application using the shimmer package.

Step 1: Install the Shimmer Package

The first step is to add the shimmer package to your Flutter project. Open your pubspec.yaml file and add the following dependency:

dependencies:
  shimmer: ^2.0.1

Then, run the command flutter pub get to install the package.

Step 2: Import the Shimmer Package

In your Dart file, import the shimmer package:

import 'package:shimmer/shimmer.dart';

Step 3: Create a Shimmer Loading Screen

Let’s assume you are fetching data from an API and displaying it in a ListView. We'll create a ShimmerLoadingScreen widget that uses the shimmer effect while the data is being fetched. Additionally, we'll implement a simple fetchData function to simulate data fetching.

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

class ShimmerLoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shimmer Loading'),
      ),
      body: FutureBuilder(
        future: fetchData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return ShimmerList(); // Shimmer effect while loading
          } else if (snapshot.hasError) {
            return Center(
              child: Text('Error: ${snapshot.error}'),
            );
          } else {
            return YourDataWidget(data: snapshot.data);
          }
        },
      ),
    );
  }

  Future<List<String>> fetchData() async {
    // Simulate data fetching delay
    await Future.delayed(Duration(seconds: 2));
    return ['Item 1', 'Item 2', 'Item 3'];
  }
}

Step 4: Create ShimmerList Widget

The ShimmerList widget wraps a ListView.builder with the shimmer effect applied to each list item.

class ShimmerList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300]!,
      highlightColor: Colors.grey[100]!,
      child: ListView.builder(
        itemCount: 5, // Adjust the count based on your needs
        itemBuilder: (context, index) {
          return ListTile(
            title: Container(
              height: 20,
              width: 200,
              color: Colors.white,
            ),
          );
        },
      ),
    );
  }
}

Step 5: Implement YourDataWidget

Replace the placeholder YourDataWidget with the widget that will display your actual data once it's loaded.

class YourDataWidget extends StatelessWidget {
  final List<String> data;

  YourDataWidget({required this.data});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(data[index]),
        );
      },
    );
  }
}

Step 6: Run Your App

Now, run your Flutter app, and you should see a shimmer effect while the data is being fetched. Once the data is loaded, it will seamlessly transition to the actual content.

void main() {
  runApp(MaterialApp(
    home: ShimmerLoadingScreen(),
  ));
}

Implementing a shimmer loading effect in your Flutter app enhances the user experience by providing visual feedback during data fetching. Adjust the itemCount and other parameters in the ShimmerList widget based on your specific use case.