Question

我希望根据数据库中的信息返回卡列表，但该卡无法正常运行。请暂时忽略图像图标。

（这只是stackoverflow上的一个随机文本，允许我发布我的问题-Lorem ipsum dolor sit amet，秘密上瘾。在dapibus nec nunc varius中。Mauris porta maximus mi，ut imperdiet urna tincidunt ac。Nam tincidunt nisi velent。Rheoncus ut leo et placerat。Nunc non ultrices erat，pellentesque totor。Pellentesque fermentum dignissim ultrices。Phasellus nec velit eget libero viverra efficitur quis eget nunc。Donec ut magna e velam di ctumst。

代码如下：

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*)
          )
        )
      )
    ]
  )
);

只需在此处解决一些未对齐的问题

使用api返回扑扑的卡片列表

1 个答案: