Boni Machado
Boni Machado

Reputation: 197

How to custom cardlike panels in flutter?

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

Answers (1)

Kaboom
Kaboom

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

Related Questions