时间戳

首页 > 解决方案 > 在 Future Builder 中全屏显示圆形进度条

flutter - 在 Future Builder 中全屏显示圆形进度条

问题描述

下面的代码显示了我未来的构建器，它进行 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()));
  },
);

}

标签： flutterflutter-layoutflutter-dependencies

解决方案

请看下面的代码。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());
              },
            ),
          ],
        ),
      ),
    );
  }
}

推荐阅读