Flutter加载动画进度展示插件animation_load_progress的使用

Flutter加载动画进度展示插件animation_load_progress的使用

使用

Animation Load Progress 是一个用于在 Flutter 应用中显示加载动画进度的插件。以下是一个简单的示例，演示如何使用该插件。

首先，确保你已经在 pubspec.yaml 文件中添加了依赖项：

dependencies:
  animation_load_progress: ^版本号

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

接下来，我们来看一下具体的使用方法。首先创建一个 HomeView 类，该类继承自 StatefulWidget。在这个类中，我们定义了一个布尔变量 isAsync 用于控制是否显示加载动画。同时，我们定义了一个 signIn 方法来模拟异步操作，并在操作完成后将 isAsync 设置为 false。

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  [@override](/user/override)
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  bool isAsync = false; // 添加变量

  void signIn() {
    isAsync = true;
    setState(() {});
    Future.delayed(
      const Duration(
        seconds: 3,
      ),
      () {
        isAsync = false;
        setState(() {});
      },
    );
  }

  [@override](/user/override)
  void initState() {
    signIn();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimationLoadProgress(
        inAsyncCall: isAsync,
        colorProgress: Colors.red, // 选择你的颜色
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            backgroundColor: Colors.white,
            title: const Text(
              'Loading ...',
              style: TextStyle(color: Colors.white),
            ),
            centerTitle: true,
          ),
          body: const Center(
            child: Text('Loading Example'),
          ),
        ));
  }
}

在这个示例中，AnimationLoadProgress 组件根据 inAsyncCall 的值来决定是否显示加载动画。当 isAsync 为 true 时，会显示加载动画；反之，则显示普通内容。

colorProgress 参数用于设置加载动画的颜色。你可以根据需要更改它以适应你的应用主题。

最后，我们通过 MaterialApp 和 Scaffold 构建了基本的应用界面。当 isAsync 为 true 时，用户会看到一个红色的加载动画，而当 isAsync 为 false 时，会看到 “Loading Example” 文本。

完整示例代码

以下是完整的示例代码：

import 'package:animation_load_progress/animation_load_progress.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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        floatingActionButtonTheme: FloatingActionButtonThemeData(
          backgroundColor: Colors.blue.shade800,
        ),
        colorScheme: ColorScheme.light(primary: Colors.blue.shade800),
      ),
      home: const HomeView(),
    );
  }
}

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  [@override](/user/override)
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  bool isAsync = false; // 添加变量

  void signIn() {
    isAsync = true;
    setState(() {});
    Future.delayed(
      const Duration(
        seconds: 3,
      ),
      () {
        isAsync = false;
        setState(() {});
      },
    );
  }

  [@override](/user/override)
  void initState() {
    signIn();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimationLoadProgress(
      inAsyncCall: isAsync,
      colorProgress: Colors.red, // 选择你的颜色
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: const Text(
            'Loading ...',
            style: TextStyle(color: Colors.white),
          ),
          centerTitle: true,
        ),
        body: const Center(
          child: Text('Loading Example'),
        ),
      ),
    );
  }
}