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

simple_loading_dialog 是一个简单的全屏加载对话框插件，适用于Flutter应用。它在等待一个Future完成时显示一个全屏的进度对话框，并且可以自定义对话框的外观。

特性

• 简单的全屏加载对话框。
• 在等待Future完成时阻止用户输入。
• 发生错误时重新抛出异常。
• 可自定义对话框的外观。
• 返回Future的结果。

安装

要在项目中使用该插件，请在pubspec.yaml文件中添加依赖：

dependencies:
  simple_loading_dialog: ^latest_version

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

使用示例

显示对话框

使用showSimpleLoadingDialog函数来显示对话框：

final result = await showSimpleLoadingDialog<String>(
  context: context,
  future: myFutureFunction,
);

这将在等待myFutureFunction完成时显示一个全屏的进度对话框。一旦Future完成，结果将被返回，对话框也会被关闭。

自定义外观

可以通过传递dialogBuilder来自定义对话框的外观：

await showSimpleLoadingDialog<void>(
  context: context,
  future: myFutureFunction,
  dialogBuilder: (context, _) => AlertDialog(
    content: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CircularProgressIndicator(),
        SizedBox(height: 16),
        Text('Custom message'),
      ],
    ),
  ),
);

使用SimpleLoadingDialogTheme（推荐）

通过在应用的主题中定义并传递SimpleLoadingDialogTheme来定制对话框的外观：

MaterialApp(
  title: 'My App',
  theme: ThemeData(
    useMaterial3: true,
    colorSchemeSeed: Colors.blue,
    extensions: [
      SimpleLoadingDialogTheme(
        dialogBuilder: (context, message) {
          return AlertDialog(
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const SizedBox(height: 16),
                const CircularProgressIndicator(),
                const SizedBox(height: 16),
                Text(message),
                const SizedBox(height: 16),
              ],
            ),
          );
        },
      ),
    ],
  ),
  home: MyHomePage(),
);

final result = await showSimpleLoadingDialog<String>(
  context: context,
  future: myFutureFunction,
  message: "Saving...",
);

错误处理

如果在等待Future完成时发生错误，异常会被重新抛出。可以使用try-catch块来处理错误：

try {
  await showSimpleLoadingDialog<void>(
    context: context,
    future: myFutureFunction,
  );
} catch (e) {
  // Handle the error.
}

可选：使用包装函数返回Result类型

可以定义一个包装函数来显示加载对话框并返回一个Result类型。

第一步：定义Result类

sealed class Result<T> {
  const Result();
}

class Success<T> extends Result<T> {
  const Success({required this.value});

  final T value;
}

class Failure<T> extends Result<T> {
  const Failure({required this.error, this.stackTrace});

  final Object error;
  final StackTrace? stackTrace;
}

第二步：创建包装函数

Future<Result<T>> showSimpleLoadingDialogWithResult<T>({
  required BuildContext context,
  required Future<T> Function() future,
  DialogBuilder? dialogBuilder,
  String message = 'Loading...',
  bool barrierDismissible = false,
}) async {
  try {
    final res = await showSimpleLoadingDialog(
      context: context,
      future: future,
      dialogBuilder: dialogBuilder,
      message: message,
      barrierDismissible: barrierDismissible,
    );

    return Success(value: res);
  } catch (err, stack) {
    return Failure(error: err, stackTrace: stack);
  }
}

第三步：显示对话框并处理结果

ElevatedButton(
  onPressed: () async {
    final result = await showSimpleLoadingDialogWithResult<String>(
      context: context,
      future: () async {
        await Future<void>.delayed(const Duration(seconds: 1));
        // return 'Hello';
        throw Exception('Error');
      },
    );

    if (context.mounted) {
      switch (result) {
        case Success():
          context.showMessageSnackBar('Success result: ${result.value}');
        case Failure():
          context.showMessageSnackBar('Failed result: ${result.error}');
      }
    }
  },
  child: const Text('Optional: Show loading dialog with result'),
);

完整示例代码

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

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Loading Dialog Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Loading Dialog Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () async {
                final result = await showSimpleLoadingDialog<String>(
                  context: context,
                  future: () async {
                    await Future<void>.delayed(const Duration(seconds: 1));
                    return 'Hello';
                  },
                );

                if (context.mounted) {
                  context.showMessageSnackBar('Success result: $result');
                }
              },
              child: const Text('Show loading dialog'),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: () async {
                try {
                  final result = await showSimpleLoadingDialog<String>(
                    context: context,
                    future: () async {
                      await Future<void>.delayed(const Duration(seconds: 1));
                      throw Exception('Error');
                    },
                  );

                  if (context.mounted) {
                    context.showMessageSnackBar('Success result: $result');
                  }
                } catch (e) {
                  if (context.mounted) {
                    context.showMessageSnackBar('Failed result: $e');
                  }
                }
              },
              child: const Text('Show loading dialog with error'),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: () async {
                final result = await showSimpleLoadingDialog<String>(
                  context: context,
                  future: () async {
                    await Future<void>.delayed(const Duration(seconds: 1));
                    return 'World';
                  },
                  dialogBuilder: (context, _) {
                    return const AlertDialog(
                      content: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SizedBox(height: 16),
                          CircularProgressIndicator(),
                          SizedBox(height: 16),
                          Text('Loading...'),
                          SizedBox(height: 16),
                        ],
                      ),
                    );
                  },
                );

                if (context.mounted) {
                  context.showMessageSnackBar('Success result: $result');
                }
              },
              child: const Text('Show loading dialog with custom dialog'),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: () async {
                final result = await showSimpleLoadingDialogWithResult<String>(
                  context: context,
                  future: () async {
                    await Future<void>.delayed(const Duration(seconds: 1));
                    throw Exception('Error');
                  },
                );

                if (context.mounted) {
                  switch (result) {
                    case Success():
                      context.showMessageSnackBar('Success result: ${result.value}');
                    case Failure():
                      context.showMessageSnackBar('Failed result: ${result.error}');
                  }
                }
              },
              child: const Text('Optional: Show loading dialog with result'),
            ),
          ],
        ),
      ),
    );
  }
}

extension BuildContextX on BuildContext {
  void showMessageSnackBar(String message) {
    ScaffoldMessenger.of(this).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: const Duration(milliseconds: 500),
      ),
    );
  }
}