Flutter异步加载对话框插件future_loading_dialog的使用

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

Flutter异步加载对话框插件 future_loading_dialog 的使用

future_loading_dialog 是一个易于使用的自适应加载对话框，用于可视化 Dart Future。它会在给定的 Future 执行时显示一个加载对话框，并在 Future 完成后自动关闭。如果发生错误，则会调用 onError 方法并返回 null。

主要功能

  • 显示加载对话框直到 Future 完成。
  • 当 Future 完成时，对话框将被关闭，并返回 Future 的结果。
  • 如果发生错误，可以指定 onError 回调来处理异常情况。
  • 可以设置全局偏好如 LoadingDialog.defaultTitle, LoadingDialog.defaultBackLabel, 和 LoadingDialog.defaultOnError 来控制外观和行为。

示例代码

下面是一个完整的示例 Demo，展示了如何使用 future_loading_dialog 包来创建带有加载动画的按钮操作：

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

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

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

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

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 模拟一个简单的延迟Future作为演示
  Future<void> displayLoadingModal() async {
    await showFutureLoadingDialog(
      context: context,
      future: () => Future.delayed(const Duration(seconds: 1)),
    );
  }

  // 模拟一个包含错误的Future
  Future<void> displayLoadingModalWithError() async {
    await showFutureLoadingDialog(
      context: context,
      future: () async {
        await Future.delayed(const Duration(seconds: 1));
        throw Exception("模拟异常");
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: displayLoadingModal,
              child: const Text('显示加载对话框 (成功)'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: displayLoadingModalWithError,
              child: const Text('显示加载对话框 (失败)'),
            ),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用future_loading_dialog插件来实现异步加载对话框的示例代码。future_loading_dialog是一个方便的Flutter插件，用于显示一个加载对话框，直到一个异步操作完成。

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

dependencies:
  flutter:
    sdk: flutter
  future_loading_dialog: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个简单的示例，展示如何在按钮点击时显示一个加载对话框，并在异步操作完成后关闭对话框。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Future Loading Dialog Example'),
        ),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  FutureLoadingDialog _dialog;

  @override
  void initState() {
    super.initState();
    // 初始化FutureLoadingDialog
    _dialog = FutureLoadingDialog(context);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 显示加载对话框
        _dialog.show(
          title: 'Loading...',
          message: 'Please wait while we fetch data.',
        );

        // 模拟一个异步操作，比如从网络获取数据
        await Future.delayed(Duration(seconds: 3));

        // 异步操作完成后关闭对话框
        _dialog.close();

        // 可以在这里显示获取到的数据或执行其他操作
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Data loaded successfully!')),
        );
      },
      child: Text('Load Data'),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当按钮被点击时，会显示一个加载对话框，并模拟一个异步操作（使用Future.delayed模拟3秒的延迟）。一旦异步操作完成，加载对话框会被关闭，并显示一个SnackBar通知用户数据已成功加载。

请确保在实际应用中处理可能出现的异常，以确保用户体验的流畅性和应用的稳定性。例如，你可以在Future.delayed调用周围使用try-catch块来捕获并处理可能发生的错误。

回到顶部