Flutter加载对话框插件show_loader_dialog的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter加载对话框插件show_loader_dialog的使用

特性

  • 显示Flutter加载对话框

开始使用

要使用此插件，需要在pubspec.yaml文件中添加show_loader_dialog作为依赖项。

平台支持

Android iOS MacOS Web Linux Windows
✔️ ✔️

使用方法

最小化示例

ElevatedButton(
  onPressed: () {
    CommonDialog.showLoader(true); // 显示加载对话框
    Future.delayed(
      const Duration(seconds: 5),
      () {
        CommonDialog.showLoader(false); // 隐藏加载对话框
      },
    );
  },
  child: const Text("显示加载对话框"),
),

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用show_loader_dialog插件。

import 'package:flutter/material.dart';
import 'package:show_loader_dialog/show_loader_dialog.dart'; // 引入插件

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false, // 移除调试标志
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 创建状态类
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea( // 确保UI安全区域
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black, // 设置AppBar背景颜色
          title: const Text("Flutter加载对话框"), // 设置AppBar标题
          centerTitle: true, // 将标题居中
        ),
        body: Center( // 设置页面中心位置
          child: ElevatedButton(
            onPressed: () {
              CommonDialog.showLoader(true); // 显示加载对话框
              Future.delayed(
                const Duration(seconds: 5), // 延迟5秒
                () {
                  CommonDialog.showLoader(false); // 隐藏加载对话框
                },
              );
            },
            style: ElevatedButton.styleFrom(primary: Colors.green), // 设置按钮颜色
            child: const Text("显示加载对话框"), // 设置按钮文本
          ),
        ),
      ),
    );
  }
}

更多关于Flutter加载对话框插件show_loader_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter加载对话框插件show_loader_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用show_loader_dialog插件来显示加载对话框的示例代码。这个插件可以帮助你在应用中进行网络请求或其他耗时操作时，向用户显示一个加载中的对话框。

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

dependencies:
  flutter:
    sdk: flutter
  show_loader_dialog: ^latest_version  # 请替换为最新的版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用ShowLoaderDialog类来显示加载对话框。

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:show_loader_dialog/show_loader_dialog.dart';
  1. 创建一个全局的ShowLoaderDialog实例

你可以在你的主文件（如main.dart）中创建一个全局的ShowLoaderDialog实例，这样你就可以在整个应用中轻松调用它。

ShowLoaderDialog loaderDialog;

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  loaderDialog = ShowLoaderDialog(
    context: null,  // 这里初始化为null，稍后在需要时传入
    barrierDismissible: false,
    loaderType: LoaderType.Custom,
    customLoader: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
        ),
      ),
    ),
  );

  runApp(MyApp());
}

注意：context初始化为null，稍后在调用show方法时需要传入当前的BuildContext。

  1. 在需要显示加载对话框的地方调用show方法

例如，在一个按钮点击事件中显示加载对话框：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Show Loader Dialog Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 显示加载对话框
              loaderDialog.show(context);

              // 模拟一个耗时操作
              await Future.delayed(Duration(seconds: 3));

              // 隐藏加载对话框
              loaderDialog.hide();

              // 显示操作结果
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('操作完成！')),
              );
            },
            child: Text('开始操作'),
          ),
        ),
      ),
    );
  }
}

在这个例子中，当用户点击按钮时，加载对话框会显示3秒钟，然后隐藏，并显示一个SnackBar通知用户操作已完成。

以上就是一个完整的Flutter项目中使用show_loader_dialog插件来显示加载对话框的示例。你可以根据自己的需求调整加载对话框的样式和行为。

回到顶部