Flutter加载占位符动画插件flutter_shimmer的使用

flutter_shimmer 是一个用于创建闪烁效果（Shimmer effect）的Flutter插件，它能很好地指示加载状态，为用户提供更友好的界面设计，替代传统的ProgressBar或普通加载器。

显示一些❤️并给项目加星以支持该项目

GitHub 项目链接

Shimmer模式示例

Shimmer Mode	Screenshot	Code Example
Play Store Shimmer		PlayStoreShimmer()
Light Mode Shimmer		ListTileShimmer()
Dark Mode Shimmer		ListTileShimmer(isDarkMode: true)
Purplish Mode Shimmer		ListTileShimmer(isPurplishMode: true)
Purplish(Dark) Mode		ListTileShimmer(isPurplishMode: true, isDarkMode: true)
CustomColor Mode		ProfileShimmer(hasCustomColors: true, colors: [Color(0xFF651fff), Color(0xFF834bff), Color(0xFF4615b2)])

开始使用

颜色模式

• Light Mode
• Dark Mode
• Purplish Mode
• Custom Color Mode (自定义颜色模式)

可选参数

• isRectBox: 设置形状，默认为圆形
• isDarkMode: 是否启用深色模式，默认为浅色模式
• isPurplishMode: 是否启用紫色调模式，默认为透明
• isDisabledAvatar: 是否隐藏头像，默认显示
• isDisabledButton: 是否在ListTileShimmer中隐藏右侧按钮，默认显示
• beginAlign: 设置渐变开始位置，默认为左上角
• endAlign: 设置渐变结束位置，默认为右下角
• hasBottomBox: 是否显示底部矩形框，默认不显示
• padding: 设置内边距，默认16.0
• margin: 设置外边距，默认16.0
• hasCustomColors: 是否使用自定义颜色，默认使用默认颜色
• colors: 当hasCustomColors设为true时，需提供3种颜色

自定义颜色设置步骤

1. 将hasCustomColors属性设为true。
2. 给colors属性提供3种颜色。

ListTileShimmer(
  hasCustomColors: true,
  colors: [
    Color(0xFF1769aa),
    Color(0xFF4dabf5),
    Color(0xFF2196f3)
  ],
),

示例代码

以下是一个完整的示例demo，展示了如何在应用中使用flutter_shimmer：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDarkMode = false;
  bool isPurplishMode = false;
  bool isCustomColors = false;

  @override
  void initState() {
    super.initState();
    setState(() {
      this.isCustomColors = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter_shimmer",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter_Shimmer"),
        ),
        body: ListView(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "ListTileShimmer ( onlyWithProfilePicture:true )",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            ListTileShimmer(
              bgColor: Colors.yellow,
              onlyShowProfilePicture: true,
              height: 20,
            ),
            Divider(),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "ListTileShimmer",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            ListTileShimmer(
              bgColor: Colors.pink,
              height: 20,
            ),
            Divider(),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "YoutubeShimmer",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            YoutubeShimmer(),
            Divider(),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "VideoShimmer",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            VideoShimmer(),
            Divider(),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "ProfileShimmer",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            ProfileShimmer(
              hasCustomColors: true,
              colors: [Color(0xFF651fff), Color(0xFF834bff), Color(0xFF4615b2)],
            ),
            Divider(),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "ProfilePageShimmer",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            ProfilePageShimmer(),
            Divider(),
            Container(
              padding: EdgeInsets.all(16.0),
              child: Text(
                "ProfilePageShimmer(With Bottom Box)",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            ProfilePageShimmer(
              hasBottomBox: true,
            ),
          ],
        ),
      ),
    );
  }
}

通过上述代码和配置，您可以轻松地在您的Flutter应用程序中实现各种类型的Shimmer效果。希望这些信息对您有所帮助！如果有任何问题或建议，请随时告知。