shimmer_a 1.1.1

A package offers a simple method of including shimmer effect in Flutter project.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shimmer_a Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const HomeShimmer(),
    );
  }
}

class HomeShimmer extends StatefulWidget {
  const HomeShimmer({Key? key}) : super(key: key);

  @override
  State<HomeShimmer> createState() => _HomeShimmerState();
}

class _HomeShimmerState extends State<HomeShimmer> {
  bool _isLoading = true;
  List<String> data = [];

  @override
  initState() {
    super.initState();
    getData();
  }

  Future<void> getData() async {
    data = await getAPIData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ShimmerA example"),
      ),
      body: Column(
        children: [
          SizedBox(
            height: 90,
            width: double.infinity,
            child: ShimmerA(
              shimmerCount: 10,
              shimmerAxis: Axis.horizontal,
              isShimmer: _isLoading,
              isScrolling: true,
              duration: const Duration(milliseconds: 1000),
              ownGradient: const LinearGradient(
                colors: [
                  Color(0x99AAAAAA),
                  Color(0x90AAAAAA),
                  Color(0xFFAAAAAA),
                  Color(0x90AAAAAA),
                  Color(0x99AAAAAA),
                ],
                stops: [0.0, 0.30, 0.5, 0.70, 1.0],
                begin: Alignment.topCenter,
                end: Alignment.centerRight,
              ),
              shimmerWidget: const [
                ShimmerWidget(
                  height: 50,
                  width: 50,
                  radius: 40,
                  padding: EdgeInsets.all(5.0),
                ),
              ],
              child: ListView.builder(
                physics:
                    _isLoading ? const NeverScrollableScrollPhysics() : null,
                itemCount: data.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Container(
                    height: 60,
                    width: 60,
                    padding: const EdgeInsets.all(5.0),
                    child: CircleAvatar(
                      radius: 40,
                      child: ClipOval(
                        child: Image.asset(
                          data[index],
                          fit: BoxFit.cover,
                          width: 50,
                          height: 50,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          Expanded(
            child: ShimmerA(
              shimmerCount: 5,
              isShimmer: _isLoading,
              duration: const Duration(milliseconds: 1500),
              direction: ShimmerADirection.ltr,
              ownGradient: const LinearGradient(
                colors: [
                  Color(0x99AAAAAA),
                  Color(0x90AAAAAA),
                  Color(0xFFAAAAAA),
                  Color(0x90AAAAAA),
                  Color(0x99AAAAAA),
                ],
                stops: [0.0, 0.30, 0.5, 0.70, 1.0],
                begin: Alignment.topCenter,
                end: Alignment.centerRight,
              ),
              shimmerWidget: [
                ShimmerWidget(
                  height: 180,
                  width: MediaQuery.of(context).size.width - 10,
                  radius: 8,
                  margin: const EdgeInsets.only(left: 25, right: 25),
                ),
                ShimmerARow(children: [
                  const ShimmerWidget(
                    height: 50,
                    width: 50,
                    radius: 50,
                    padding: EdgeInsets.all(5.0),
                    margin: EdgeInsets.only(left: 25, right: 5, top: 5),
                  ),
                  ShimmerAColumn(children: [
                    ShimmerWidget(
                      height: 12,
                      width: MediaQuery.of(context).size.width / 2,
                      radius: 3,
                      margin: const EdgeInsets.only(left: 5, bottom: 4),
                    ),
                    ShimmerWidget(
                      height: 12,
                      width: MediaQuery.of(context).size.width / 3,
                      radius: 3,
                      margin: const EdgeInsets.only(left: 5),
                    ),
                  ]),
                ]),
              ],
              child: ListView.builder(
                physics:
                    _isLoading ? const NeverScrollableScrollPhysics() : null,
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return Container(
                      margin: const EdgeInsets.only(bottom: 8),
                      child: CardListItem(imagePath: data[index]));
                },
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isLoading = !_isLoading;
          });
        },
        child: Icon(
          _isLoading ? Icons.hourglass_full : Icons.hourglass_bottom,
        ),
      ),
    );
  }

  Future<List<String>> getAPIData() async {
    await Future.delayed(const Duration(seconds: 10));
    List<String> imagePath = [
      "images/pexels-kaique-rocha-775203.jpg",
      "images/pexels-max-andrey-1366630.jpg",
      "images/pexels-todd-trapani-1535162.jpg",
      "images/pexels-kaique-rocha-775203.jpg",
      "images/pexels-max-andrey-1366630.jpg",
      "images/pexels-todd-trapani-1535162.jpg",
      "images/pexels-kaique-rocha-775203.jpg",
      "images/pexels-max-andrey-1366630.jpg",
      "images/pexels-todd-trapani-1535162.jpg",
      "images/pexels-kaique-rocha-775203.jpg",
      "images/pexels-max-andrey-1366630.jpg",
      "images/pexels-todd-trapani-1535162.jpg",
    ];
    setState(() {
      _isLoading = !_isLoading;
    });
    return imagePath;
  }
}

class CardListItem extends StatelessWidget {
  final String imagePath;

  const CardListItem({
    required this.imagePath,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            margin: const EdgeInsets.only(left: 25, right: 25),
            child: _buildImage(imagePath)),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              height: 60,
              width: 60,
              padding: const EdgeInsets.all(5.0),
              margin: const EdgeInsets.only(left: 25, right: 5, top: 5),
              child: CircleAvatar(
                radius: 40,
                child: ClipOval(
                  child: Image.asset(
                    imagePath,
                    fit: BoxFit.cover,
                    width: 50,
                    height: 50,
                  ),
                ),
              ),
            ),
            _buildText(),
          ],
        ),
      ],
    );
  }

  Widget _buildImage(String path) {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(16),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Image.asset(
            path,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  Widget _buildText() {
    return const Padding(
      padding: EdgeInsets.symmetric(horizontal: 8),
      child: Text(
        'Show some text.',
      ),
    );
  }
}