Вернуть список карточек во флаттере используя api

Question

Я хочу вернуть список карт в соответствии с тем, что у меня есть в базе данных, но он работает не так, как я хочу. пожалуйста, просто на некоторое время проигнорируйте значок изображения.

(это просто случайный текст в stackoverflow, позволяющий мне опубликовать мой вопрос - Lorem ipsum dolor sit amet, consittetur adipiscing elit. В dapibus nec nunc a varius. Maurisporta maximus mi, ut imperdiet urna tincidunt ac. Nam tincidunt nisi Velit. Praesent rhoncus ut leo et placerat. non velit dictum tristique eget eget diam.)

вот код:

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

return Container(
  width: MediaQuery.of(context).size.width;
  height: 150;
  padding: EdgeInsets.symmetric(horizontal: 20),
  child: Stack(
    children: <Widget>[
       Container(
         child: Row(
           children: <Widget>[
              Container(
                width: 60,
              ),
              Expanded(
                child: Container(
                 decoration: BoxDecoration(
                   boxShadow: [BoxShadow(blurRadius: 10)]
                 ),
                 child: Column(
                   children: <Widget>[
                      Text(*snapshot data name*),
                      Text(*snapshot data location*)
                     ]
                   )
                 )
              )
           ]
         )
      ),
      Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(1000),
           image: DecorationImage(
             image: NetworkImage(*snapshot data image*)
          )
        )
      )
    ]
  )
);

просто исправьте некоторые смещения здесь