Flutter渐变遮罩效果插件shimmer_effect的使用

Flutter渐变遮罩效果插件shimmer_effect的使用

Shimmer effect 是一个为Flutter应用添加渐变遮罩（闪烁）效果的插件。它能够让你轻松地给任何Flutter组件添加闪烁动画，非常适合用于表示正在加载的状态。

特性

  • 轻松为任何Flutter组件添加闪烁效果。
  • 可自定义闪烁持续时间、颜色和次要颜色。
  • 支持多种方向的闪烁效果。

开始使用

首先，在你的pubspec.yaml文件中添加依赖：

dependencies:
  shimmer_effect: ^1.0.2

然后，在Dart代码中导入该包：

import 'package:shimmer_effect/shimmer_effect.dart';

使用示例

下面是一个完整的示例demo，展示了如何在Flutter应用中使用shimmer_effect来创建带有渐变遮罩效果的组件：

import 'package:flutter/material.dart';
import 'package:shimmer_effect/shimmer_effect.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 Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Shimmer Animation Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ShimmerEffect(
          baseColor: Colors.teal,
          highlightColor: Colors.blueAccent,
          child: SizedBox(
            width: 200,
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: const [
                Icon(
                  Icons.favorite,
                  size: 72,
                  color: Colors.red,
                ),
                SizedBox(height: 16),
                Text(
                  'Shimmer Animation',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 24),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter渐变遮罩效果插件shimmer_effect的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter渐变遮罩效果插件shimmer_effect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用shimmer_effect插件来实现渐变遮罩效果的代码示例。这个插件通常用于在加载数据时显示一个占位符动画，给用户一个加载中的视觉反馈。

首先，你需要在你的pubspec.yaml文件中添加shimmer_effect依赖：

dependencies:
  flutter:
    sdk: flutter
  shimmer_effect: ^x.y.z  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例，展示如何在一个ListView中使用ShimmerEffect来创建渐变遮罩效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shimmer Effect Example'),
        ),
        body: ShimmerListExample(),
      ),
    );
  }
}

class ShimmerListExample extends StatefulWidget {
  @override
  _ShimmerListExampleState createState() => _ShimmerListExampleState();
}

class _ShimmerListExampleState extends State<ShimmerListExample> {
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    // 模拟数据加载过程
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: isLoading
          ? Shimmer.fromColors(
              baseColor: Colors.grey[300]!,
              highlightColor: Colors.grey[100]!,
              child: Column(
                children: [
                  ShimmerItem(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    height: 50,
                    width: double.infinity,
                  ),
                  SizedBox(height: 10),
                  ShimmerItem(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    height: 20,
                    width: double.infinity,
                  ),
                  SizedBox(height: 10),
                  ShimmerItem(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    height: 50,
                    width: double.infinity,
                  ),
                ],
              ),
            )
          : ListView.builder(
              itemCount: 10,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('Item ${index + 1}'),
                );
              }),
    );
  }
}

在这个示例中，我们创建了一个ShimmerListExample组件，它首先显示一个Shimmer效果的加载占位符，然后在2秒后（模拟数据加载时间）切换到一个实际的ListView。

  • Shimmer.fromColors方法允许我们自定义基础颜色和高亮颜色。
  • ShimmerItem用于定义单个渐变遮罩条的高度和宽度。
  • 使用ListView.builder来构建实际的数据列表。

这样，当数据正在加载时，用户会看到一个平滑的渐变遮罩动画，而当数据加载完成后，则会显示实际的内容。

回到顶部