如何在颤抖中自定义卡片式面板？

Question

我正在尝试建立一个这样的面板，但似乎我没有办法完成事情：

所需图像，其顶部标题为“ Ops”，背景为白色

但是我得到的只是这个：

带有我的实际标题/正文的图像

我的目标是将蓝色和黄色部分（隐藏在它们之间的红色部分）连接起来。

这是我的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: _tituloTela(),
        ),
        body: _lista());
  }

Widget _lista() {
    return ListView.builder(
        itemCount: _listaEventos.length,
        itemBuilder: (BuildContext context, int index) {
          return _cardEvento(_listaEventos[index]);
        });
  }

  Widget _cardEvento(registro) {
    return Container(
        color: Colors.red,
        margin: EdgeInsets.all(0),
        padding: EdgeInsets.all(0),
        child: Column(children: <Widget>[
          ListTile(title: _cardEventoTitulo(registro)),
          ListTile(title: _cardEventoCorpo(registro)),
        ]));
  }

  Widget _cardEventoTitulo(registro) {
    return Container(
        color: Colors.blue,
        margin: EdgeInsets.all(0),
        padding: EdgeInsets.all(0),
        child: ListTile(
          title: Text(
            registro.nome,
          ),
        ));
  }

  Widget _cardEventoCorpo(registro) {
    return Container(
        color: Colors.yellow,
        margin: EdgeInsets.all(0),
        padding: EdgeInsets.all(0),
        child: CachedNetworkImage(
            imageUrl: registro.urlFotoCapa,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => new Icon(Icons.error)),
    );
  }

Answer 1

一种解决方案是使用一列，并在其中添加两个具有不同高度的容器。

Count