Flutter底部加载动画插件bottom_loader的使用

Flutter底部加载动画插件bottom_loader的使用

bottom_loader 是一个轻量级的Flutter插件，用于在应用程序中显示底部加载动画。它是一个状态管理组件，允许你动态地更改底部加载器上的文本。

支持的Dart版本

• Dart SDK版本 >= 2.12.0

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  bottom_loader: ^0.2.2

使用方法

1. 导入包 在你的Dart文件中导入 bottom_loader 包：

   import 'package:bottom_loader/bottom_loader.dart';
   

2. 创建BottomLoader实例 在 build() 方法中初始化 BottomLoader 对象，并传递 context 参数：

   BottomLoader bl;
   
   [@override](/user/override)
   Widget build(BuildContext context) {
     bl = new BottomLoader(context);
     // 其他代码...
   }
   

3. 自定义加载器（可选） 你可以指定一个自定义的加载器小部件，并设置是否可以通过返回按钮关闭底部加载器（isDismissible 参数）。还可以选择是否显示日志（showLogs 参数）：

   bl = new BottomLoader(
     context,
     isDismissible: true, // 是否可以通过返回按钮关闭
     showLogs: true,      // 是否显示日志
     loader: CircularProgressIndicator(), // 自定义加载器
   );
   

4. 样式化底部加载器（可选） 你可以通过 style() 方法来自定义底部加载器的样式，包括消息文本、背景颜色和文本样式：

   bl.style(
     message: '正在加载文件...', // 消息文本
     backgroundColor: Colors.white, // 背景颜色
     messageTextStyle: TextStyle(
       color: Colors.black,          // 文本颜色
       fontSize: 19.0,               // 文本大小
       fontWeight: FontWeight.w600   // 文本粗细
     ),
   );
   

5. 显示底部加载器 使用 show() 方法显示底部加载器：

   await bl.show();
   

6. 关闭底部加载器 使用 close() 方法关闭底部加载器，并可以监听关闭后的回调：

   bl.close().then((isHidden) {
     print(isHidden); // 打印是否已隐藏
   });
   

示例代码

以下是一个完整的示例代码，展示了如何使用 bottom_loader 插件：

import 'dart:async';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Bottom Loader Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  BottomLoader bl;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Loader'),
      ),
      body: Container(
        child: Center(
          child: ElevatedButton(
            child: Text('显示底部加载器'),
            onPressed: () {
              // 初始化 BottomLoader
              bl = new BottomLoader(
                context,
                showLogs: true, // 显示日志
                isDismissible: true, // 可以通过返回按钮关闭
              );

              // 设置样式
              bl.style(
                message: '请稍候...',
              );

              // 显示底部加载器
              bl.show();

              // 5秒后关闭底部加载器并导航到下一个页面
              Future.delayed(Duration(seconds: 5)).whenComplete(() {
                bl.close();

                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => SecondScreen()),
                );
              });
            },
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Loader Sample'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: Center(child: Text('第二个页面')),
    );
  }
}