How can I add a Container after a FutureBuilder? - flutter

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