在颤动中显示全屏加载小部件

Question

我想在 API 调用时显示全屏加载视图。但是当我在脚手架主体中添加加载小部件时，它会出现在 appbar 和底部导航器之后。

我花了很多时间全屏显示加载视图。另外，我想在 API 调用时防止后退操作。

Answer 1

1. 全屏加载器：显示全屏加载器的最佳解决方案是使用包 https://pub.dev/packages/screen_loader。
2. 加载时防止返回动作：这个包这个包提供了一个变量isLoading，用它来防止导航返回。例如：

// --------------- some_screen.dart ---------------
import 'package:flutter/material.dart';
import 'package:screen_loader/screen_loader.dart';

class SomeScreen extends StatefulWidget {
  @override
  _SomeScreenState createState() => _SomeScreenState();
}

class _SomeScreenState extends State<SomeScreen> with ScreenLoader<SomeScreen> {
  getData() {
    this.performFuture(NetworkService.callApi);
  }

  @override
  Widget screen(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
          // your beautiful design..
          ),
      onWillPop: () async {
        return !isLoading;
      },
    );
  }
}

// --------------- app_api.dart ---------------
class NetworkService {
  static Future callApi() async {

  }
}

注意：您需要查看performFuture 的定义，了解它在不同场景下的工作原理。

Answer 2

您可以使用此对话框进行全屏加载progress_dialog

Answer 3

好吧，既然你使用的是Scaffold，那就使用它的showDialog()方法吧。

它有一个名为barrierDismissible 的属性，如果您将其设置为 false，用户将无法关闭它之外的屏幕或与之交互。

void _openLoadingDialog(BuildContext context) {
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        content: CircularProgressIndicator(),
      );
    },
  );
}

完成 API 加载后，调用 Navigator.pop(context); 关闭对话框。

为防止用户单击 Dialog 上的后退按钮并将其关闭，请将您的 Scaffold 封装在 WillPopScope 小部件中并实现 onWillPop 函数。

@override
Widget build(BuildContext context) {
  return WillPopScope(
      child: Scaffold(
        body: Container(),
      ),
      onWillPop: _onBackButton
  );
}

Future<bool> _onBackButton() {
  // Implement your logic
  return Future.value(false);
}

如果您返回 false，用户将无法按下返回按钮。所以使用你想要的任何逻辑，例如'如果我正在加载返回 false，否则返回 true'。

Answer 4

你没有想过移除加载屏幕的支架吗？