How can I add a Container after a FutureBuilder?

Question

How can you add more Containers or Widgets after using FutureBuilder?

I've been trying to combine these 2 blocks of code into one but can't figure out how to do so. I need the 2 buttons from code-block 2 to be added after this ListView.builder. Or does this have to be on 2 separate pages?

    @override
      Widget build(BuildContext context) =>
          Scaffold(
              body:
              FutureBuilder<ListResult>(
            future: futureFiles,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final files = snapshot.data!.items;
                return ListView.builder(
                    itemCount: files.length,
                    itemBuilder: (context, index) {
                      final file = files[index];
                      double? progress = downloadProgress[index];
                      return ListTile(
                          title: Text(file.name),
                          subtitle: progress != null
                              ? LinearProgressIndicator(
                                  value: progress,
                                  backgroundColor: Colors.black26,
                                )
                              : null,
                          trailing: IconButton(
                            icon: const Icon(
                              Icons.download,
                              color: Colors.white,
                            ),
                            onPressed: () => downloadFile(index, file),
                          ));
                    });
              } else if (snapshot.hasError) {
                return const Center(child: Text('Error occurred'));
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          )
      );
    }

I want to combine the following code into the code above. But can't quite figure out how to do that.

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if(pickedFile != null)
                  Expanded(
                      child: Container(
                          child: Center(
                            child: Image.file(File(pickedFile!.path!),width:double.infinity,fit: BoxFit.cover,),
                            //child: Text(pickedFile!.name),
                          )
                      )
                  ),
                if (pickedFile == null)
                  Expanded(
                      child: Container(
                          child: Center(
                              displayFiles()
                          )
                      )
                  ),
                Row(
                  mainAxisAlignment : MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(20.0),
                      child: SizedBox(
                        height:40,
                        width: 150,
                        child:
                        ElevatedButton(
                          child: Text('Select File'),
                          onPressed: selectFile,
                          style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.red,
                              textStyle: const TextStyle(fontSize: 20),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height:40,
                      width: 150,
                      child: ElevatedButton(
                        child: Text('Upload File'),
                        onPressed: uploadFile,
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.red,
                            textStyle: const TextStyle(fontSize: 20)
                        ),
                      ),
                    ),
                  ],
                ),
                buildProgress(),
              ],
            ),
          ),
        );
      }

I tried wrapping the buttons inside a Container but I can't figure out where to place the Container in the first block of code.

Answer 1

Do like this

Column(
  children: [ 
      Expanded(
           child:  FutureBuilder<ListResult>()),
      //Second page code
      Center()
   ]
)

Answer 2

You may return a Column widget from the builder of FutureBuilder instead of returning a ListView, and make ListView the first child of that Column. The buttons can be defined as second, third....etc children as you please.

Answer 3

  itemCount: files.length + 3;
  final file = files[index+3];
  if(index==0){
  (some widget)
  }
  else if(index==1){
  (some widget)
  }
  if(index==2){
  (some widget)
  }else return ListTile()