Flutter自定义加载动画插件custom_loading的使用

custom_loading 是一个 Flutter 包，它提供了在 Flutter 应用程序中轻松显示可定制加载屏幕的方法。它可以让你创建视觉上吸引人的加载屏幕，使其与你的应用程序设计相匹配，并在数据获取或处理操作期间提供无缝的用户体验。

特性

• 显示可定制的加载界面。
• 轻松将加载屏幕集成到现有的 Flutter 应用程序中。
• 可以自定义加载屏幕的外观，以匹配应用程序的设计。
• 平滑地在加载屏幕和应用程序内容之间切换。
• 简单且轻量级。

安装

要将 custom_loading 添加到你的 Flutter 项目中，在 pubspec.yaml 文件中添加它作为依赖项：

dependencies:
  custom_loading: ^1.0.0

开始使用

在 Dart 文件中导入 custom_loading 包：

import 'package:custom_loading/custom_loading.dart';

使用方法

在屏幕的最顶层使用 CustomLoadingScaffold 小部件代替 Scaffold，并提供一个加载小部件和 isLoading 属性。

CustomLoadingScaffold(
  isLoading: true, // 布尔值，控制是否显示加载界面
  blurIntensity: 2.0, // 背景模糊强度
  loaderWidget: Container(), // 自定义加载小部件
  body: Container(), // 正常添加内容区域
);

你还可以使用 Scaffold 的所有参数。

示例

查看 GitHub 仓库中的 example 目录，以了解 custom_loading 包的完整使用示例。

import 'package:custom_loading/custom_loading.dart';
import 'package:flutter/material.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Loading Scaffold Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Custom Loading Scaffold Example'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return CustomLoadingScaffold(
      isLoading: isLoading,
      blurIntensity: 2.0,
      loaderWidget: LoadingAnimationWidget.staggeredDotsWave(
        color: Colors.deepPurple,
        size: 80,
      ),
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title,
            style: const TextStyle(
                color: Colors.black,
                fontSize: 14,
                fontWeight: FontWeight.w500)),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              "按下面的按钮开始加载",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                  fontWeight: FontWeight.w500),
            ),
            const SizedBox(
              height: 20,
            ),
            InkWell(
              onTap: () {
                setState(() {
                  isLoading = true;
                });

                Future.delayed(const Duration(seconds: 5), () {
                  setState(() {
                    isLoading = false;
                  });
                });
              },
              child: Container(
                height: 60,
                width: 180,
                decoration: BoxDecoration(
                    color: Colors.deepPurple,
                    borderRadius: BorderRadius.circular(20)),
                child: const Center(
                    child: Text(
                  "显示加载",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w600),
                )),
              ),
            )
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用程序，其中包含一个按钮。点击按钮后，会触发一个持续5秒的延迟，然后隐藏加载界面。加载界面使用了 LoadingAnimationWidget.staggeredDotsWave 动画效果。