如何在 FutureBuilder 完成获取项目之前加载其他静态元素

Question

我想在加载 FutureBuilder 之前加载像 bottom navigation bar 这样的静态元素。所以它应该看起来像这样。当我们进入新画面时， CircularProgressIndicator 显示在中间，其他元素（如底部导航）已显示。你能告诉我怎样才能做到这一点吗？这是我的代码：

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:package/constants/AppConstants.dart';
import 'package:package/util/HttpActions.dart';

import 'BottomAppBar.dart';
import 'FAB.dart';

class HomePage extends StatefulWidget {
  final String jwt;

  const HomePage(this.jwt);

  @override
  _HomePage createState() => _HomePage();

  factory HomePage.fromBase64(String jwt) => HomePage(jwt);
}

class _HomePage extends State<HomePage> {
  late final String jwt;

  @override
  void initState() {
    super.initState();
    jwt = widget.jwt;
  }

  final uri = Uri.http(
      AppConstants.BASE_URL,
      AppConstants.SOME_URL,
      {'email': 'some.mail@gmail.com'}); // TODO change to proper link

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Center(
          child: FutureBuilder(
              future: http.get(
                uri,
                headers: {
                  HttpHeaders.contentTypeHeader:
                      HttpActions.APPLICATION_JSON_HEADER,
                  HttpHeaders.authorizationHeader: jwt
                },
              ),
              builder: (context, snapshot) => snapshot.hasData
                  ? Scaffold(
                      backgroundColor: const Color(0xFEF9F9FC),
                      floatingActionButtonLocation:
                          FloatingActionButtonLocation.centerDocked,
                      floatingActionButton: buildFAB(),
                      bottomNavigationBar: BuildBottomAppBar(),
                    )
                  : snapshot.hasError
                      ? Text("An error occurred")
                      : CircularProgressIndicator()),
        ),
      );
}

现在，如果您看到导航底部栏在 snaphost 有数据时加载。有什么办法可以制作类似专栏的东西，所以我将拥有静态项目、静态项目、未来构建器、静态项目（即 nav bottom bar）

我想实现这样的效果： desired effect

Answer 1

第一个小部件将是脚手架，底部导航栏和主体内部添加 Future Builder

像这样：

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:package/constants/AppConstants.dart';
import 'package:package/util/HttpActions.dart';

import 'BottomAppBar.dart';
import 'FAB.dart';

class HomePage extends StatefulWidget {
  final String jwt;

  const HomePage(this.jwt);

  @override
  _HomePage createState() => _HomePage();

  factory HomePage.fromBase64(String jwt) => HomePage(jwt);
}

class _HomePage extends State<HomePage> {
  late final String jwt;

  @override
  void initState() {
    super.initState();
    jwt = widget.jwt;
  }

  final uri = Uri.http(
      AppConstants.BASE_URL,
      AppConstants.SOME_URL,
      {'email': 'some.mail@gmail.com'}); // TODO change to proper link

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: const Color(0xFEF9F9FC),
      floatingActionButtonLocation:
         FloatingActionButtonLocation.centerDocked,
      floatingActionButton: buildFAB(),
      bottomNavigationBar: BuildBottomAppBar(),
      body: Center(
        child: FutureBuilder(
              future: http.get(
                uri,
                headers: {
                  HttpHeaders.contentTypeHeader:
                      HttpActions.APPLICATION_JSON_HEADER,
                  HttpHeaders.authorizationHeader: jwt
                },
              ),
              builder: (context, snapshot) => snapshot.hasData
                  ? widgetWithYourData
                  : snapshot.hasError
                      ? Text("An error occurred")
                      : CircularProgressIndicator()),
      ),
    )
}

如何在 FutureBuilder 完成获取项目之前加载其他静态元素

How to load other static elements before FutureBuilder finishes fetching items

flutter

dart

flutter-futurebuilder