Reputation: 197
I'm trying to build a panel like this, but seems like I'm not getting something to get things done:
Desired image with a top header titled "Ops" and a white background body
But all I'm getting is this:
Image with my actual header / body
My goal is joining the blue and the yellow parts (hiding de red part between them).
Here's my code:
@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)),
);
}
Upvotes: 0
Views: 312
Reputation: 568
One solution is to use a column and add 2 container inside with different height.
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 30,
color: Colors.green,
),
Container(
height: 100,
color: Colors.yellow,
)
],
),
),
Upvotes: 1