Flutter骨架屏加载动画插件skeleton_shimmer_loading的使用

Flutter骨架屏加载动画插件skeleton_shimmer_loading的使用

在Flutter项目中添加骨架屏加载动画效果，可以使用flutter_shimmer_loading插件。此插件提供了简便的方法来实现骨架屏加载动画。

如何使用

首先，确保已将flutter_shimmer_loading添加到您的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  skeleton_shimmer_loading: ^版本号

然后，导入该包：

import 'package:skeleton_shimmer_loading/skeleton_shimmer_loading.dart';

接下来，您可以使用AppShimmerLoading来创建骨架屏加载动画。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('骨架屏加载动画示例'),
        ),
        body: Center(
          child: AppShimmerLoading(
            isLoading: true,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 使用Expanded包裹第一个容器
                Expanded(
                  child: ShimmerItem(
                    child: Container(
                      width: 100,
                      height: 20,
                      color: Colors.yellow,
                    ),
                  ),
                ),
                // 第二个容器
                ShimmerItem(
                  child: Container(
                    width: 100,
                    height: 20,
                    color: Colors.blue,
                  ),
                ),
                // 第三个容器
                Container(
                  width: 100,
                  height: 20,
                  color: Colors.red,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter骨架屏加载动画插件skeleton_shimmer_loading的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter骨架屏加载动画插件skeleton_shimmer_loading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


skeleton_shimmer_loading 是一个用于在 Flutter 应用中实现骨架屏加载动画的插件。它可以帮助你在数据加载时显示一个占位符动画，提升用户体验。以下是使用 skeleton_shimmer_loading 插件的详细步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  skeleton_shimmer_loading: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 基本使用

你可以使用 SkeletonShimmerLoading 来创建一个骨架屏加载动画。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Skeleton Shimmer Loading Example'),
        ),
        body: SkeletonShimmerLoading(
          child: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return ListTile(
                leading: CircleAvatar(),
                title: Text('Loading...'),
                subtitle: Text('Loading...'),
              );
            },
          ),
          isLoading: true, // 设置为 true 显示骨架屏动画
        ),
      ),
    );
  }
}

3. 自定义骨架屏

你可以通过自定义 SkeletonShimmerLoading 的样式来适应你的应用设计。以下是一些常用的自定义选项：

  • shimmerColor: 设置闪烁动画的颜色。
  • baseColor: 设置骨架屏的基础颜色。
  • highlightColor: 设置闪烁时的高亮颜色。
  • direction: 设置闪烁动画的方向。
SkeletonShimmerLoading(
  child: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return ListTile(
        leading: CircleAvatar(),
        title: Text('Loading...'),
        subtitle: Text('Loading...'),
      );
    },
  ),
  isLoading: true,
  shimmerColor: Colors.grey[300],
  baseColor: Colors.grey[200],
  highlightColor: Colors.grey[100],
  direction: ShimmerDirection.leftToRight,
);

4. 控制骨架屏的显示与隐藏

你可以通过 isLoading 参数来控制骨架屏的显示与隐藏。当 isLoading 为 true 时，骨架屏动画将显示；当 isLoading 为 false 时，骨架屏将隐藏，显示实际内容。

bool _isLoading = true;

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Skeleton Shimmer Loading Example'),
    ),
    body: SkeletonShimmerLoading(
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return ListTile(
            leading: CircleAvatar(),
            title: Text('Item $index'),
            subtitle: Text('Subtitle $index'),
          );
        },
      ),
      isLoading: _isLoading,
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _isLoading = !_isLoading;
        });
      },
      child: Icon(Icons.refresh),
    ),
  );
}
回到顶部