Flutter占位符加载插件flutter_skeleton_plus的使用

Flutter占位符加载插件flutter_skeleton_plus的使用

Flutter Skeleton Plus: Effortless Shimmering Placeholders

Flutter Skeleton Plus 是一个用于在您的 Flutter 应用中创建平滑动画占位符（也称为闪烁效果）的包。这些占位符在应用程序加载数据时为用户提供视觉反馈，使等待过程感觉更短，并提供更精致的体验。

为什么使用 Flutter Skeleton Plus？

• 易于使用：只需导入预构建的骨架控件并根据您的应用外观进行自定义。
• 流畅的动画：引人入胜的闪烁效果保持用户参与。
• 灵活：轻松构建复杂的加载状态。
• 维护良好：由 Apps Lanka 开发，定期更新和维护。

如何开始

1. 安装：将 flutter_skeleton_plus 添加到您的 pubspec.yaml 文件中。
2. 导入：import 'package:flutter_skeleton_plus/flutter_skeleton_plus.dart';
3. 使用：在数据加载时，将内容包裹在 Skeleton 控件中。

使用示例

可以使用以下方式封装子控件：

import 'package:flutter_skeleton_plus/flutter_skeleton_plus.dart';

Skeleton(
    isLoading: _isLoading,
    skeleton: SkeletonListView(),
    child: Container(child: Center(child: Text("Content"))),
)

或者直接使用：

Container(
    child: _isLoading
    ? SkeletonListView()
    : Container(child: Center(
                       child: Text("Content"))
        ),
)

还可以使用 SkeletonTheme 来设置树中所有骨架后代的默认配置：

SkeletonTheme(
    // themeMode: ThemeMode.light,
    shimmerGradient: LinearGradient(
        colors: [
          Color(0xFFD8E3E7),
          Color(0xFFC8D5DA),
          Color(0xFFD8E3E7),
        ],
        stops: [
          0.1,
          0.5,
          0.9,
        ],
      ),
      darkShimmerGradient: LinearGradient(
        colors: [
          Color(0xFF222222),
          Color(0xFF242424),
          Color(0xFF2B2B2B),
          Color(0xFF242424),
          Color(0xFF222222),
        ],
        stops: [
          0.0,
          0.2,
          0.5,
          0.8,
          1.0,
        ],
        begin: Alignment(-2.4, -0.2),
        end: Alignment(2.4, 0.2),
        tileMode: TileMode.clamp,
      ),
      child: MaterialApp(
        ...
      ),
)

更多定制

对于更复杂的形状，可以在 SkeletonItem 控件内部构建骨架：

ListView.builder(
  physics: NeverScrollableScrollPhysics(),
  itemCount: 5,
  itemBuilder: (context, index) => Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(color: Colors.white),
      child: SkeletonItem(
          child: Column(
            children: [
              Row(
                children: [
                  SkeletonAvatar(
                    style: SkeletonAvatarStyle(
                      shape: BoxShape.circle, width: 50, height: 50),
                  ),
                  SizedBox(width: 8),
                  Expanded(
                    child: SkeletonParagraph(
                      style: SkeletonParagraphStyle(
                        lines: 3,
                        spacing: 6,
                        lineStyle: SkeletonLineStyle(
                          randomLength: true,
                          height: 110,
                          borderRadius: BorderRadius.circular(8),
                          minLength: MediaQuery.of(context).size.width / 6,
                          maxLength: MediaQuery.of(context).size.width / 3,
                        )),
                    ),
                  )
                ],
              ),
              SizedBox(height: 12),
              SkeletonParagraph(
                style: SkeletonParagraphStyle(
                  lines: 3,
                  spacing: 6,
                  lineStyle: SkeletonLineStyle(
                    randomLength: true,
                    height: 10,
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
              SizedBox(height: 12),
              SkeletonAvatar(
                style: SkeletonAvatarStyle(
                  width: double.infinity,
                  minHeight: MediaQuery.of(context).size.height / 8,
                  maxHeight: MediaQuery.of(context).size.height / 3,
                ),
              ),
              SizedBox(height: 8),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      SkeletonAvatar(
                        style: SkeletonAvatarStyle(width: 20, height: 20)),
                      SizedBox(width: 8),
                      SkeletonAvatar(
                        style: SkeletonAvatarStyle(width: 20, height: 20)),
                      SizedBox(width: 8),
                      SkeletonAvatar(
                        style: SkeletonAvatarStyle(width: 20, height: 20)),
                    ],
                  ),
                  SkeletonLine(
                    style: SkeletonLineStyle(
                      height: 16,
                      width: 64,
                      borderRadius: BorderRadius.circular(8)),
                  )
                ],
              )
            ],
          )),
    ),
  ),
);

示例

以下是几个示例图像和代码片段：

示例	描述
	占位符列表
	占位符段落
	默认列表视图

示例	描述
	自定义列表视图
	列表视图复杂卡片
	骨架主题

示例	描述
	光明/黑暗模式
	右到左布局
	定制闪烁

示例代码

import 'package:example/home.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeletons Package Examples',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}