How to load other static elements before FutureBuilder finishes fetching items

Question

I would like to load static elements like bottom navigation bar before FutureBuilder will be loaded. So it should looks like this. When we enter the new screen, CircularProgressIndicator is shown in the middle and other elements like bottom navigation is already shown. Could you tell me how can I achieve this? Here is my code:

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

Now if you see navigation bottom bar is loaded when snaphost has data. Is there any way to make something like column, so I will have static item, static item, future builder, static item (which is nav bottom bar)

I want to achieve effect like this: desired effect

Answer 1

The first widget will be the Scaffold, with the bottom navigation bar and inside the body add the Future Builder

Something like this:

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