1

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

3

1 Answer 1

6

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:

enter image description here

4
  • Thank you! Although I modified my "current" and "expected" output in my question this helped me created a new column by adding another Spacer before CircleAvatar. Where would I add in the onTap call?
    – Caiz22
    Apr 29, 2019 at 12:55
  • 1
    You can use Text/Image in Expanded before CircleAvatar in my solution, you may want to remove Spacer.
    – CopsOnRoad
    Apr 29, 2019 at 13:12
  • That's were I have put it :) What about an onTap/onClick call?
    – Caiz22
    Apr 30, 2019 at 0:31
  • 1
    If you want to allow clicks on your Text/Image you need to wrap them in GestureDetector and use onTap().
    – CopsOnRoad
    Apr 30, 2019 at 1:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.