Flutter put FutureBuilder widget inside a Column

Question

I have a FutureBuilder widget which retrieves chats (or rather updates) from the server and displays them. Here is the code:

Future> fetchChats(http.Client client, String providerUUID) async {
  returns List..
}

class ProviderChats extends StatelessWidget {
  final List chats;
  final String providerUUID;

  ProviderChats({this.chats, this.providerUUID});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder>(
      future: fetchChats(http.Client(), providerUUID),
      builder: (context, snapshot){
        if(snapshot.hasError) print(snapshot.error);

        return snapshot.hasData ?
        ChatsListWidgetClass(chats: snapshot.data) :
        Center(child: CircularProgressIndicator());
      },
    );
  }
}

class ChatsListWidgetClass extends StatelessWidget {
  final List chats;

  ChatsListWidgetClass({this.chats});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: chats.length,
      itemBuilder: (context, index) {
        return Card(
          elevation: 10.0,
          child: Column(
            children: [
              Text(
                chats[index].message,
              ),
              Text(
                chats[index].createdAt,
              ),
            ],
          ),
        );
      },
    );
  }
}

It looks something like this:

At the bottom of the screen, I want to show a TextField with a Send button (just like what we see on chat screens). But I am unable to accommodate my ListView.builder inside a Column.

Is there a way to make the list occupy 80% of the vertical space from top and make the send textfield occupy the bottom 20%. Basically like a chat application window.

user_63531 · Answer

Using Remi's response this worked for me

     return new Scaffold(
      appBar: new AppBar(
        title: new Text("Home Page"),
      ),
      body: new Builder(
          builder: (BuildContext context) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Expanded(
                  flex: 8,
                  child: futureBuilder,
                ),
                Expanded(
                  flex: 2,
                  child: Text("hello"),
                  ),

              ],
            );
        }
      )
    );

user_8394265 · Answer

You can use Expanded with a custom weight to fill a column with a percentage

Column(
  children: [
    Expanded(
      flex: 8,
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

Flutter put FutureBuilder widget inside a Column

2 Answers