0
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();
});
}))));
}
The problem is that you are rendering your list inside a container 124 high by 300 wide, and the card properties are applied in this container, you must pass the measurements that are in the container to your Listtile.
– Chance