在 Future Builder 中全屏显示循环进度条答案

【问题标题】：Showing Circluar Progress bar in full screen in flutter inside a Future Builder在 Future Builder 中全屏显示循环进度条
【发布时间】：2020-12-11 09:03:53
【问题描述】：

下面的代码显示了我未来的构建器，它进行 API 调用并返回数据。我希望 CircularProgressIndicator 占据设备的整个屏幕。问题是未来的构建器在页面视图中，它没有占据整个屏幕。有没有办法让进度条全屏显示？

提前致谢。

 Widget serverRequest(HomeViewModel vm, int position) {
return FutureBuilder(
  future: vm.fetchList(
      vm.getDataList.length, NUMBER_OF_ARTICLES_PER_PAGE),
  builder: (context, projectSnap) {
    if (projectSnap.connectionState == ConnectionState.done) {
      return ThreeArticleItem();
    } else
      return Container(child: Center(child: CircularProgressIndicator()));
  },
);

}

【问题讨论】：

@some 用户大小应该是可定制的，但它应该冻结全屏。直到数据来自 API。页面视图滚动不应该发生
@some 用户无法使用，因为页面视图从标签视图下方开始，并在底部导航栏上方结束。我需要一些方法来覆盖它，以便它占据全屏
我的建议是用 IgnorePointer 包装您希望冻结的整个小部件，直到 FutureBuilder 不完整。像这样的 IgnorePointer( ignoring: true, child: WidgetToFreeze(), )

标签： flutter flutter-layout flutter-dependencies

【解决方案1】：

请看下面的代码。 CircularProgressIndicator 显示在屏幕中间。在未来完成之前，用户无法与 CircularProgressIndicator 下方的任何小部件进行交互。 IgnorePointer 小部件用于停止用户事件，直到未来完成。

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool ignoring = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Demo"),
        ),
        body: Stack(
          children: [
            IgnorePointer(
              ignoring: ignoring,
              child: ListView(
                  children: List.generate(
                      30, (index) => ListTile(title: Text("Tile # $index")))),
            ),
            FutureBuilder<bool>(
              future: Future.delayed(const Duration(seconds: 10), () {
                setState(() => ignoring = false);
                return true;
              }),
              builder: (context, snapshot) {
                return (snapshot.hasData)
                    ? const Offstage()
                    : const Center(child: CircularProgressIndicator());
              },
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：