Card layouts - Flutter

Question

I am trying to build a card using flutter, that looks like the concept shown below, but I am getting this instead.

Here's the card widget code in Dart:

@override
Widget build(BuildContext context) {
    return Center(
      child: Card(
        margin: EdgeInsets.symmetric(horizontal: 14.0),
        color: Colors.white,
        elevation: 6.0,
        child: InkWell(
          splashColor: Colors.blue.withAlpha(30),
          onLongPress: () {_copy();},
          onTap: () {},
          child: Container(
            child: Padding( 
              padding: EdgeInsets.all(12.0),
              child: Row(
                children: <Widget>[
                  Text(widget.cardTitle),
                  Spacer(),
                  ButtonBar(
                    children: <Widget>[
                      new IconButton(
                        icon: Icon(CardsIcons.arrows_ccw, color: primaryDark,),
                        onPressed: () {_refresh();},
                      ),
                      new IconButton(
                        icon: Icon(CardsIcons.heart_empty, color: Colors.redAccent,),
                        onPressed: () {_bookmark();},
                      ),
                    ],
                  ),
                  SizedBox(height: 24.0,),
                  Text(
                    widget.cardContent,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

This is the output I am getting currently

This is the desired output

adam_th · Accepted Answer · 2019-08-19T00:40:17.327

Your structure is close but to get the layout you'll need to wrap everything in a Column widget first with children containing your row and then text.

The code below should be a good start, you'll just need to adjust padding/text style etc to get it like your mockup

  @override
  Widget build(BuildContext context) {
      return Center(
        child: Card(
          margin: EdgeInsets.symmetric(horizontal: 14.0),
          color: Colors.white,
          elevation: 6.0,
          child: InkWell(
            splashColor: Colors.blue.withAlpha(30),
            onLongPress: () {_copy();},
            onTap: () {},
            child: Container(
              child: Padding( 
                padding: EdgeInsets.all(12.0),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Text(widget.cardTitle),
                        Spacer(),
                        ButtonBar(
                          children: <Widget>[
                            new IconButton(
                              icon: Icon(CardsIcons.arrows_ccw, color: primaryDark,),
                              onPressed: () {_refresh();},
                            ),
                            new IconButton(
                              icon: Icon(CardsIcons.heart_empty, color: Colors.redAccent,),
                              onPressed: () {_bookmark();},
                            ),
                          ],
                        ),
                        SizedBox(height: 24.0,),
                      ],
                    ),
                    Container(
                      child: Text(
                        widget.cardContent,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
    }

and how can I position the card at the bottom? (right above the bottom navigation bar) — Thorvald, Aug 19 '19 at 01:16
The align widget will do the trick. There's some discussion on different approaches here https://stackoverflow.com/questions/45746636/flutter-trying-to-bottom-center-an-item-in-a-column-but-it-keeps-left-aligning — adam_th, Aug 19 '19 at 01:20

Card layouts - Flutter

1 Answers1