How do I add a new column to a Card in flutter?
Currently, I have 2 Columns and can't figure out how to add a third between these since they are on the left and right sides. When I have tried adding a "new Column", it only creates a new row of text under the first Column.
This is my code so far:
Widget _buildListItem(BuildContext context, Record record) {
return Card(
key: ValueKey(record.activityName),
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
title: Text(
record.activityName,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 23),
),
subtitle: Row(
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
text: TextSpan(
text: "Activations: "+record.activations+
"\n"+record.dateCompleted,
style: TextStyle(color: Colors.white),
),
maxLines: 2,
softWrap: true,
)
],
)
)
],
),
trailing: Container(
child: Hero(
tag: "avatar_" + record.activityName,
child: CircleAvatar(
radius: 32,
backgroundImage: NetworkImage(record.icon),
backgroundColor: Colors.white,
)
)
),
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => new DetailPage(record: record)));
}
),
)
);
}
I am wanting 3 columns so that I can add either an image in the middle of this card.
Current output Expected output
Solution 1: CopsOnRoad
Based on your screenshot, here is the solution. You can modify it according to your needs.
Widget _buildListItem(BuildContext context) {
return Card(
margin: EdgeInsets.all(12),
elevation: 4,
color: Color.fromRGBO(64, 75, 96, .9),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16),
child: Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Jumping", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
SizedBox(height: 4),
Text("Activations 9", style: TextStyle(color: Colors.white70)),
Text("03-08-19", style: TextStyle(color: Colors.white70)),
],
),
Spacer(),
CircleAvatar(backgroundColor: Colors.white),
],
),
),
);
}
Output: