listview - Flutter 将 FutureBuilder 小部件放在一个列中

Question

我有一个 FutureBuilder 小部件，它从服务器检索聊天(或更确切地说是更新)并显示它们。这是代码:

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

class ProviderChats extends StatelessWidget {
  final List<Chat> chats;
  final String providerUUID;

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

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Chat>>(
      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<Chat> 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: <Widget>[
              Text(
                chats[index].message,
              ),
              Text(
                chats[index].createdAt,
              ),
            ],
          ),
        );
      },
    );
  }
}

它看起来像这样:



在屏幕底部，我想显示一个带有发送按钮的 TextField(就像我们在聊天屏幕上看到的一样)。但是我无法在列中容纳我的 ListView.builder。

有没有办法让列表占据顶部垂直空间的 80%，并使发送文本字段占据底部的 20%。基本上就像一个聊天应用程序窗口。

Answer 1

使用雷米的回应这对我有用

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

              ],
            );
        }
      )
    );