How can I add a container after a futurebuilder?-CodePudding

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 codeblock 2 to be added after this listview.builder. Or does this have to be on 2 seperate 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.

CodePudding user response：

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.

CodePudding user response：

Do like this

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