Flutter加载提示对话框插件loading_alert_dialog的使用

Flutter加载提示对话框插件loading_alert_dialog的使用

loading_alert_dialog 是一个可定制的 AlertDialog，它允许在阻塞应用程序时运行计算，类似于使用 showDialog 或 showCupertinoDialog，但不需要使用 Stack 或 Overlay 小部件。

开始使用

此包通过一个类 LoadingAlertDialog 暴露静态方法，这些方法包括：

• showLoadingAlertDialog 这个主要的方法作为 showDialog/showCupertinoDialog 的包装器，通过 Future 控制，该 Future 通过 computation 参数提供。当提供的 Future 完成（无论是成功还是失败）时，对话框将自动关闭，并且方法调用本身会返回 Future 的结果或抛出异常。

• setDefaultWidgetBuilder 通过在这里设置 WidgetBuilder，每次调用 showLoadingAlertDialog 都不需要提供 builder 参数。

如何使用示例

import 'package:loading_alert_dialog/loading_alert_dialog.dart';

LoadingAlertDialog.showLoadingAlertDialog<int>(
  context: context,
  builder: (context,) => Card(
    child: Padding(
      padding: const EdgeInsets.all(24.0,),
      child: Column(
        children: <Widget>[
          CircularProgressIndicator(),
          Text("请等待..."),
        ],
        mainAxisSize: MainAxisSize.min,
      ),
    ),
    color: Colors.white,
  ),
  computation: Future.delayed(
    Duration(seconds: 3,), () {
      final randomNumber = Random().nextInt(300);
      return randomNumber;
    },
  ),
).then((number) {
  if (number != null) {
    setState(() {
      _randomNumber = number;
    });
  }
});

上面的示例代码展示了如何创建一个简单的卡片，其中包含一个文本和一个 CircularProgressIndicator，持续3秒钟后弹出一个随机数，然后关闭对话框，并将弹出的数字显示到视图中。

完整示例代码

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:loading_alert_dialog/loading_alert_dialog.dart';

void main() {
  runApp(
    LoadingAlertDialogExampleApp(),
  );
}

class LoadingAlertDialogExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.blue,
      home: LoadingAlertDialogExample(),
    );
  }
}

class LoadingAlertDialogExample extends StatefulWidget {
  [@override](/user/override)
  _LoadingAlertDialogExampleState createState() => _LoadingAlertDialogExampleState();
}

class _LoadingAlertDialogExampleState extends State<LoadingAlertDialogExample> {
  int _randomNumber = 0;

  void _showAlert() {
    LoadingAlertDialog.showLoadingAlertDialog<int>(
      context: context,
      builder: (context,) => Card(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            children: <Widget>[
              CircularProgressIndicator(),
              Text("请等待..."),
            ],
            mainAxisSize: MainAxisSize.min,
          ),
        ),
        color: Colors.white,
      ),
      computation: Future.delayed(
        Duration(seconds: 3,), () {
          final randomNumber = Random().nextInt(100);
          return randomNumber;
        },
      ),
    ).then((number) {
      if (number != null) {
        setState(() {
          _randomNumber = number;
        });
      }
    },);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("加载提示对话框示例"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            children: <Widget>[
              Text("随机数: $_randomNumber"),
              ElevatedButton(
                child: Text("显示对话框"),
                onPressed: _showAlert,
              ),
            ],
            mainAxisSize: MainAxisSize.min,
          ),
        ),
      ),
    );
  }
}