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

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  loading_skeleton: ^1.0.0  # 请检查最新版本

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

2. 基本使用

loading_skeleton 提供了 Skeleton 和 SkeletonList 两个主要组件，分别用于单个占位和列表占位。

单个占位 (Skeleton)

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Skeleton Example'),
      ),
      body: Center(
        child: Skeleton(
          width: 200,
          height: 100,
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
  }
}

列表占位 (SkeletonList)

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Skeleton Example'),
      ),
      body: SkeletonList(
        length: 5, // 列表项的数量
        builder: (context, index) => ListTile(
          leading: Skeleton(
            width: 50,
            height: 50,
            borderRadius: BorderRadius.circular(25),
          ),
          title: Skeleton(
            width: double.infinity,
            height: 20,
            borderRadius: BorderRadius.circular(5),
          ),
          subtitle: Skeleton(
            width: double.infinity,
            height: 15,
            borderRadius: BorderRadius.circular(5),
          ),
        ),
      ),
    );
  }
}

3. 自定义样式

你可以通过 Skeleton 和 SkeletonList 的参数来自定义占位样式，例如颜色、圆角、动画等。

Skeleton(
  width: 200,
  height: 100,
  borderRadius: BorderRadius.circular(10),
  color: Colors.grey[300], // 背景颜色
  highlightColor: Colors.grey[100], // 高亮颜色
  animationDuration: Duration(milliseconds: 1000), // 动画时长
)

4. 控制加载状态

你可以通过条件渲染来控制何时显示骨架屏。例如，在数据加载时显示骨架屏，加载完成后显示实际内容。

class MyWidget extends StatelessWidget {
  final bool isLoading = true; // 模拟加载状态

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Skeleton Example'),
      ),
      body: isLoading
          ? SkeletonList(
              length: 5,
              builder: (context, index) => ListTile(
                leading: Skeleton(
                  width: 50,
                  height: 50,
                  borderRadius: BorderRadius.circular(25),
                ),
                title: Skeleton(
                  width: double.infinity,
                  height: 20,
                  borderRadius: BorderRadius.circular(5),
                ),
                subtitle: Skeleton(
                  width: double.infinity,
                  height: 15,
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
            )
          : ListView.builder(
              itemCount: 5,
              itemBuilder: (context, index) => ListTile(
                leading: CircleAvatar(
                  child: Text('$index'),
                ),
                title: Text('Item $index'),
                subtitle: Text('Subtitle $index'),
              ),
            ),
    );
  }
}

5. 其他功能

loading_skeleton 还支持其他一些功能，例如自定义动画、渐变效果等。你可以查看插件的文档和示例代码来了解更多细节。

6. 运行项目

完成上述步骤后，运行你的 Flutter 项目，你应该能够看到骨架屏在数据加载时显示。

flutter run