flutter_shimmer

> 编程语言

开源

一个包提供了在 Flutter 项目中添加闪烁效果的简单方法

1.9K stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

一个包提供了在 Flutter 项目中添加闪烁效果的简单方法

闪烁

一个轻量级的 Flutter 小组件,可在占位符上绘制移动的突出显示 UI。典型的用法是在加载数据时显示骨架屏幕，以及滑动高亮显示。在行动呼吁上。

## 安装 ```yaml dependencies: shimmer: ^4.0.0 material_ui: ^1.0.1 ``` `shimmer` 4.0 使用 Flutter 的独立 [`material_ui`](https://pub.dev/packages/material_ui) 包 (Flutter 3.44+)。仍然导入 `package:flutter/material.dart` 的应用可以将这些子树包装在 `MaterialUiCompatibilityBridge` 中。 ```dart import 'package:material_ui/material_ui.dart'; import 'package:shimmer/shimmer.dart'; ``` ## 使用方法 ### 骨架占位符 `Shimmer.fromColors` 是常规的构造函数。使用固体构建子元素形状(`Container`,`Row`,`Column`)。渐变色会替换这些颜色；透明像素保持透明。 ```dart Shimmer.fromColors( baseColor: Colors.grey.shade300, highlightColor: Colors.grey.shade100, child: Column( children: [ Container(height: 200, color: Colors.white), const SizedBox(height: 16), Container(height: 12, color: Colors.white), const SizedBox(height: 8), Container(height: 12, width: 200, color: Colors.white), ], ), ); ``` 深色主题:

dart

Shimmer.fromColors(
  baseColor: Colors.grey.shade800,
  highlightColor: Colors.grey.shade600,
  child: placeholder,
);

自定义渐变

当需要 RadialGradient、SweepGradient 时,请使用默认构造函数。或者是一个遵循 Theme 的 LinearGradient。

dart

Shimmer(
  gradient: LinearGradient(
    colors: [
      Theme.of(context).colorScheme.surfaceContainerHighest,
      Theme.of(context).colorScheme.surface,
      Theme.of(context).colorScheme.surfaceContainerHighest,
    ],
    stops: const [0.35, 0.5, 0.65],
  ),
  child: placeholder,
);

方向、速度和循环

dart

Shimmer.fromColors(
  direction: ShimmerDirection.rtl,
  period: const Duration(milliseconds: 1200),
  loop: 0, // 0 = forever
  enabled: isLoading,
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
  child: placeholder,
);