How can I make a better Card UI spacing in flutter

Question

I have a Card with container containing an table. In the table are some text fields that I can't align more beautiful. Also some are longer than expected, how can I say that it should choose the next row/line when it's too long?

My code:

Widget buildCard(tage snap) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      color: choosecardcolor(snap),
      elevation: 5,
      //color: _chooseColor(snap.art.toString()),
      child:
          Container(
            padding: const EdgeInsets.all(10),
            child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(snap.stunde, style: const TextStyle(fontSize: 20),),
                  Text(snap.klasse, style: const TextStyle(fontSize: 20),),
                  Text(snap.fach, style: const TextStyle(fontSize: 20),),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(snap.raum, style: const TextStyle(fontSize: 20),),
                  Text(snap.art, style: const TextStyle(fontSize: 20),),
                  Text(snap.lehrer, style: const TextStyle(fontSize: 20),),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(snap.mitteilung, style: const TextStyle(fontSize: 20),),
                ],
              ),
            ],
          ),),
    );
  }

Did you try Table widget for alignment? Also you can wrap your long strings with Flex. — t13n, Nov 28 '21 at 21:20
Try to add your Inside Row widgets wrap it with `Expanded` or `Flexible` refer my answer [here](https://stackoverflow.com/a/68463935/13997210) or [here](https://stackoverflow.com/a/68559619/13997210) or [here](https://stackoverflow.com/a/68444861/13997210) hope its helpful to you — Ravindra S. Patil, Nov 29 '21 at 05:02

score 1 · Accepted Answer · answered Nov 28 '21 at 20:13

I think this should do it for you I just removed the row widget and made all your text variables in one text widget and added an overflow to indicate that your text is long and overflowed

I also added maxLines: 1 so you get one line in each text ( because you used row so I believe you want the 3 values to appear next to each other in case it's normal if there is multi-lines you can simply remove it )

Widget buildCard(tage snap) {
return Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  color: choosecardcolor(snap),
  elevation: 5,
  //color: _chooseColor(snap.art.toString()),
  child:
      Container(
        padding: const EdgeInsets.all(10),
        child: Column(
        children: [
          Text(snap.stunde+" "+snap.klasse+" "+snap.fach, style: const TextStyle(fontSize: 20),overflow:TextOverflow.ellipsis,maxLines:1),
          Text(snap.raum+snap.art+" "+snap.lehrer, style: const TextStyle(fontSize: 20),overflow:TextOverflow.ellipsis,maxLines:1),
          Text(snap.mitteilung, style: const TextStyle(fontSize: 20),overflow:TextOverflow.ellipsis,maxLines:1),
        ],
      ),),
);

}

Thank you, but this was not really I was looking but it helped me a lot! — iawegfib, Nov 28 '21 at 20:32

How can I make a better Card UI spacing in flutter

1 Answers1