Flutter — Shimmer

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Shimmer use in flutter

Introduction

A shimmer is an animation to display until loading data. Applications take time to fetch data. During poor internet connections, it may be a few seconds. Shimmer's are way to improve user interfaces.

Commonly used for lists, cards, and images loading to make them friendly to the app users.

Shimmers Implement in flutter

1. Install Shimmer Package

Run the below command, and dependency will appear in the pubspec.yaml file under the dependencies section.

flutter pub add shimmer
dependencies:
  flutter:
    sdk: flutter

  shimmer: ^3.0.0

2. Import the Shimmer Package

The import shimmer package to the dart file contains shimmer.

import 'package:shimmer/shimmer.dart';

3. First, Create your Screen and apply Shimmer when loading

Create the list page and include the data fetch API.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:shrimmer/components/shrimmer_hompage.dart'; // Corrected import

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> catFacts = [];
  bool isLoading = true; // Track loading state

  @override
  void initState() {
    super.initState();
    fetchCatFacts();
  }

  Future<void> fetchCatFacts() async {
    setState(() {
      isLoading = true; // Show shimmer before fetching data
    });

    try {
      final response = await http.get(Uri.parse('https://meowfacts.herokuapp.com/?count=5'));

      if (response.statusCode == 200) {
        Map<String, dynamic> data = json.decode(response.body);
        setState(() {
          catFacts = List<String>.from(data['data']).take(5).toList();
        });
      } else {
        throw Exception('Failed to load cat facts');
      }
    } catch (e) {
      debugPrint('Error fetching cat facts: $e');
    } finally {
      setState(() {
        isLoading = false; // Stop shimmer after fetching data
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          //app bar content
        ),
      body: isLoading
          ? const ShimmerWidget() // Show shimmer effect while loading
          : ListView.builder(
              itemCount: catFacts.length,
              itemBuilder: (context, index) {
                return Card(
                 //card content
                );
              },
            ),
    );
  }
}

4. Shimmer Widget Implement

Implement the shimmer widget to use in the list view screen.

class ShimmerWidget extends StatelessWidget {
  const ShimmerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300]!,
      highlightColor: Colors.grey[100]!,
      child: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.all(10),
            child: Padding(
              padding: const EdgeInsets.all(15),
              child: Row(
                children: [
                  Container(
                    height: 70,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

After developing and running the project, shimmer will apply when loading data.

Sample Code Base

This is a simple Flutter application to fetch "Cat Facts," and I have used shimmers when loading facts.

References

The official Dart & Flutter package repository provides all instructions to install and use packages.