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"),
                  ),

              ],
            );
        }
      )
    );

Answer 2

您可以使用带有自定义权重的Expanded以百分比填充列

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