Return a list of flutter cards

Question

I’m trying to return a list of cards according to the data I have in the database.

For example, if I have three documents in the bank, then the application has to create three cards, and so on. The problem is you’re putting all the documents inside a single card.

I tried to put my Listview.builder elsewhere in the code, but it still didn’t work. What am I doing wrong? I want it to look like the image on the left.

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();
                        });
                  }))));
}

Answer 1

Your medCard should look like this, the rest of the customization stays with you:

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();
    });
  });