dart - 创建合适的 Flutter UI

Question

我正在尝试创建下面的图像以进行 flutter 。尝试遵循一些示例，但无法获得正确的组合。

计划在下一阶段连接到 firebase。所以，现在我必须创建一张卡片，然后复制它。但是，我无法通过反复试验来获得正确的 UI。非常感谢任何对此的帮助。

到目前为止，下面是我所拥有的。

import 'package:flutter/material.dart';

class liberPage extends StatefulWidget {
  @override
  _liberPage createState() => new _liberPage();
}

class _liberPage extends State<liberPage> {
  final ShapeBorder shape;
  @override
  Widget build(BuildContext context) {
   return  new Container(
     child: new Column(
         mainAxisAlignment: MainAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.center,

         children: <Widget>[

           new Row(
               mainAxisAlignment: MainAxisAlignment.end,
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.end,
               children: <Widget>[
               new Card(
                 elevation: 10.0,
                 shape: shape,
                 color: Colors.blue,
                 margin: EdgeInsets.only(top: 20.0),

                 child: new Column(


                   children: <Widget>[

                     new Icon(
                         Icons.ac_unit,
                       size: 100.0,

                     ),
                     new Text(
                         "Test",
                       textAlign: TextAlign.left,
                     ),
                     new Icon(
                       Icons.menu,
                       size: 100.0,

                     ),

                   ],

                 ),
               ),


               new Card(
                 elevation: 10.0,
                 color: Colors.yellow,
                 child: new Column(

                   children: <Widget>[
                     new Icon(
                       Icons.ac_unit,
                       size: 100.0,

                     ),

                   ],

                 ),
               )

               ]

           )
         ]

     ),

   );
  }
}

Answer 1

您需要的是带有 Stack 小部件的 GridView，而不是嵌套的 Row 和 Column。我创建了可能有用的最小 UI。

class DishCardExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: GridView.count(
        shrinkWrap: true,
        crossAxisCount: 2,
        children: List.generate(
          10,
          (i) => Card(
                child: Column(
                  // mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          Container(
                            height: MediaQuery.of(context).size.height / 4,
                            width: MediaQuery.of(context).size.height / 2.5,
                            child: DecoratedBox(
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: NetworkImage(
                                        "https://i.imgur.com/FtaGNck.jpg"),
                                    fit: BoxFit.cover),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Align(
                              alignment: FractionalOffset.topLeft,
                              child: CircleAvatar(
                                backgroundColor: Colors.redAccent,
                                radius: 15.0,
                                child: Text(
                                  "NEW",
                                  textScaleFactor: 0.5,
                                ),
                              ),
                            ),
                          ),
                          Align(
                            alignment: FractionalOffset.topRight,
                            child: Container(
                              color: Colors.blueAccent,
                              height: 35.0,
                              width: 35.0,
                              child: Center(
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Icon(Icons.account_circle),
                                    Text(
                                      "1P",
                                      textScaleFactor: 0.5,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Center(
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        alignment: FractionalOffset.bottomCenter,
                        child: Text(
                          "AWESOME DISH",
                          style: TextStyle(
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        FlatButton(
                          child: Text(
                            "Add To Cart",
                            style: TextStyle(color: Colors.grey[500]),
                          ),
                          onPressed: () => null,
                        ),
                        Text(
                          "\$5",
                          style: TextStyle(color: Colors.grey[500]),
                        )
                      ],
                    )
                  ],
                ),
              ),
        ),
      ),
    );
  }
}