Card layouts - Flutter - mobile

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

Answer 1

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