0

Eu to tentando retornar uma lista de cards de acordo com os dados que tenho no banco de dados.

Por exemplo, se eu tiver três documentos no banco, então a aplicação tem que criar três cards, e assim sucessivamente. O problema é que tá colocando todos os documentos dentro de um único card.

Eu tentei colocar meu Listview.builder em outra parte no código, mesmo assim não deu certo. O que estou fazendo de errado? Quero que fique como na imagem da esquerda.

import 'package:flutter/material.dart';
import 'package:localizamed_app/models/medicos_get.dart';
import 'package:http/http.dart' as http;

class MedCard extends StatelessWidget {
  static List<Medicos> medicos;

  MedCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: const EdgeInsets.symmetric(
        vertical: 16.0,
        horizontal: 24.0,
      ),
      child: Center(
        child: new Stack(
          children: <Widget>[
            medCard,
            medThumbnail,
          ],
        ),
      ),
    );
  }

  final medThumbnail = new Container(
    margin: new EdgeInsets.symmetric(vertical: 16.0),
    alignment: FractionalOffset.centerLeft,
    child: new Container(
      height: 95.0,
      width: 95.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(270)),
        /* image: DecorationImage(
          fit: BoxFit.fill,
          image: AssetImage("images/medico.jpg"),
        ) */
      ),
    ),
  );

  final medCard = new Container(
      height: 124.0,
      width: 300.0,
      margin: new EdgeInsets.only(left: 46.0),
      decoration: new BoxDecoration(
          color: Colors.white,
          shape: BoxShape.rectangle,
          borderRadius: new BorderRadius.circular(8.0),
          boxShadow: <BoxShadow>[
            new BoxShadow(
              color: Colors.black54,
              blurRadius: 5.0,
              offset: new Offset(2.0, 5.0),
            )
          ]),
      child: Container(
          padding: EdgeInsets.only(
            left: 50,
          ),
          decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(color: Colors.redAccent, width: 3.0))),
          child: Container(
              child: FutureBuilder<List<Medicos>>(
                  future: getMedicos(http.Client()),
                  builder: (context, snapshot) {
                    return ListView.builder(
                        itemCount: snapshot.data.length, //medicos?.length ?? 0,
                        itemBuilder: (context, index) {
                          if (snapshot.hasData) {
                            return ListTile(
                                title: Text(
                                  snapshot.data[index].nome,
                                  style: TextStyle(fontSize: 20),
                                ),
                                subtitle: Text(
                                  snapshot.data[index].cidade,
                                  style: TextStyle(fontSize: 16),
                                ));
                          } else if (snapshot.hasError) {
                            print('DEU ERRO' + snapshot.error);
                          }
                          return CircularProgressIndicator();
                        });
                  }))));
}

inserir a descrição da imagem aqui

1
  • O problema é que vocês esta renderizando sua lista dentro de um container com 124 de altura por 300 de largura, e as propriedades do card estao aplicadas neste container, vocês deve passar as medidas que estao no container para seu ListTile.
    – Chance
    5/11/2019 às 0:16

1 Resposta 1

2

Seu medCard deveria ficar como algo assim, o resto da customização fica contigo:

final medCard =  FutureBuilder<List<Medicos>>(
  future: getMedicos(http.Client()),
  builder: (context, snapshot) {
    return ListView.builder(
      itemCount: snapshot.data.length, //medicos?.length ?? 0,
      itemBuilder: (context, index) {
      if (snapshot.hasData) {
        return Container(
          height: 124.0,
          width: 300.0,
          margin: new EdgeInsets.only(left: 46.0),
          decoration: new BoxDecoration(
            color: Colors.white,
            shape: BoxShape.rectangle,
            borderRadius: new BorderRadius.circular(8.0),
            boxShadow: <BoxShadow>[
              new BoxShadow(
                color: Colors.black54,
                blurRadius: 5.0,
                offset: new Offset(2.0, 5.0),
              )
            ]),
          child: ListTile(
              title: Text(
                snapshot.data[index].nome,
                style: TextStyle(fontSize: 20),
              ),
              subtitle: Text(
                snapshot.data[index].cidade,
                style: TextStyle(fontSize: 16),
              )),
        );
      } else if (snapshot.hasError) {
        print('DEU ERRO' + snapshot.error);
      }
      return CircularProgressIndicator();
    });
  });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .