Creating proper flutter UI

Question

I am trying to create the below image in to flutter. Trying to follow some examples but unable to get the right mix.

Plan is to connect to firebase in the next stage. So, for now I have to create a single card and then replicate it. But, I am having trouble to get the UI right thru trial and error. Any help looking in to this is much appreciated.

So far below is what I have.

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

What you need is a GridView with Stack widgets, not nested Rows and Columns. I have created minimal UI that may be of help.

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]),
                        )
                      ],
                    )
                  ],
                ),
              ),
        ),
      ),
    );
  }
}