在 Future Builder 中的 flutter 中全屏顯示圓形進度條

Question

下面的代碼顯示了我未來的構建器，它進行 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()));
  },
);

}

Answer 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());
              },
            ),
          ],
        ),
      ),
    );
  }
}