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

这是一个简单且高度可定制的包，适用于所有类型的用户。

特性

• 🛠️ 平滑闪烁动画：用渐变闪烁效果突出显示占位符。
• 🔢 可定制：可以配置闪烁的速度、颜色、形状和方向。
• ⌨️ 易于使用：只需将任何小部件包裹在闪烁效果中即可。
• 🔐 轻量级：设计用于性能优化，开销低。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  shimmer_premium: ^0.0.1  // 运行 `flutter pub get` 来安装包。

使用

以下是一个简单的示例以开始使用：

import 'package:shimmer_premium/shimmer_premium.dart';

ShimmerPremium(
  childDecoration: const ShimmerChildDecoration(childHeight: 95),
  child: ShimmerPremiumRepo().getDefaultChild, 
  // 默认子项，根据需要更改
),

仓库辅助

您可以使用此仓库创建子项。它简单易用且有效：

import 'package:shimmer_premium/shimmer_premium.dart';

// 如果您想要圆形头像
ShimmerPremiumRepo().getCircle()

// 如果您想要圆形或简单或带边框半径的图像头像
ShimmerPremiumRepo().getImage()

// 如果您想要一个标题
ShimmerPremiumRepo().getTitle()

// 如果您想要一个副标题
ShimmerPremiumRepo().getSubTitle()

// 如果您想要一个分割线
ShimmerPremiumRepo().getDivider()

// 如果您想要一个正文标题
ShimmerPremiumRepo().getBodyTitle()

// 如果您想要垂直/水平列表的默认子项
ShimmerPremiumRepo().getDefaultChild

// 如果您想要网格视图的默认子项
ShimmerPremiumRepo().getDefaultGridChild

参数

// 设置 ChildDecoration 类为您所需的方式
ChildDecoration(
  // 设置所需的子项数量
  final int childLength;
  // 设置您想要的子项
  final Widget child;
  // 设置子项的高度
  final double childHeight;
  // 设置子项的宽度
  final double? childWidth;
  // 设置子项的背景颜色
  final Color childBackgrounColor;
  // 设置子项的圆角半径
  final double childBorderRadius;
  // 设置子项的边框宽度
  final double childBorderWidth;
  // 设置子项的边框颜色
  final Color childBorderColor;
)

// 设置您想要的闪烁装饰
class ShimmerDecoration{
  // 
  final ShimmerListType shimmerListType;
  // 设置主要/起始颜色
  final Color highlightColor;
  // 设置次要颜色
  final Color secondaryColor;
  // 设置每个闪烁动画的持续时间
  final Duration duration;
  // 设置当子项为垂直列表时的闪烁
  verticalList: ShimmerVerticalList(
    // 设置每个项目的单独高度
    final double itemSeparateHeight
  )
  // 设置当子项为水平列表时的闪烁
  horizontalList: ShimmerHorizontalList(
    // 设置每个项目的单独宽度
    final double itemSeparateWidth
  )
  // 设置当子项为网格视图时的闪烁
  gridList: ShimmerGridList(
    // 设置网格项的总高度
    final double screenHeight;
    // 设置滚动方向
    final Axis scrollDirection;
    // 设置是否反转列表
    final bool reverse;
    // 设置每行显示的子项数量
    final int crossExisCount;
    // 设置每行元素之间的间距
    final double crossAxisSpacing;
    // 设置每列元素之间的间距
    final double mainAxisSpacing;
    // 设置每个子项的宽高比
    final double childAspectRatio;
    // 设置剪裁行为
    final Clip clipBehavior;
  )
}

示例

查看 example 文件夹中的完整示例：

import 'package:flutter/material.dart';
import 'package:shimmer_premium/config/theme/theme.dart';
import 'package:shimmer_premium/shimmer_premium.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shimmer Premium',
      debugShowCheckedModeBanner: false,
      theme: AppTheme.light(),
      home: const ShimmerLoadingScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: const Text("Shimmer Loading"), centerTitle: true),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(15),
          child: Column(
            children: [
              // 垂直列表示例
              ShimmerPremium(
                childDecoration: ChildDecoration(
                  child: ShimmerPremiumRepo().getDefaultChild,
                  childLength: 8,
                  childHeight: 95,
                ),
                shimmerDecoration: const ShimmerDecoration(
                    shimmerListType: ShimmerListType.verticalList),
              ),
              const SizedBox(height: 30),
              // 水平列表示例
              ShimmerPremium(
                childDecoration: ChildDecoration(
                  child: ShimmerPremiumRepo().getDefaultChild,
                  childLength: 8,
                  childHeight: 95,
                ),
                shimmerDecoration: const ShimmerDecoration(
                    shimmerListType: ShimmerListType.horizontalList),
              ),
              const SizedBox(height: 30),
              // 网格视图示例
              ShimmerPremium(
                childDecoration: ChildDecoration(
                  child: ShimmerPremiumRepo().getDefaultGridChild,
                  childLength: 8,
                  childHeight: 250,
                ),
                shimmerDecoration: ShimmerDecoration(
                  shimmerListType: ShimmerListType.gridViewList,
                  gridList: ShimmerGridList(screenHeight: size.height * .85),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}