How to fill Wrap-Widget's available space?

Question

I have a Wrap Widget which has a couple of Containers as children. These Containers have a Text Widget as child with different String lengths.

return SizedBox(
 height: MediaQuery.of(context).size.height * 0.3,
 width: MediaQuery.of(context).size.width,
 child:
  Wrap(
   spacing: 15,
   runSpacing: 15,
   runAlignment: WrapAlignment.center,
   alignment: WrapAlignment.center,
   children: matchBoxes(),
 );

matchBoxes() is returning a list of these kind of Containers. The value of the Text Widgets is always different.

Container(
 decoration: BoxDecoration(
   color: containerColor,
   border: Border.all(color: borderColor),
   borderRadius: const BorderRadius.all(Radius.circular(10))),
   padding: const EdgeInsets.all(8),
   child: Text(
    "dynamic text", 
    style: TextStyle(
    color: textColor, 
   )
  )
),

I want the Containers to fill the available Space. The containers should obviously not overflow either. For this the fontsize of the Text Widget would need to adjust depending on the different lengths of the Strings. I tried wrapping the container with Expanded, which didn't work. Any ideas how I can approach this?

I'm not exactly sure if I understand what you're trying to do. Are you trying to achieve something like the [`chip`](https://medium.com/aubergine-solutions/flutter-widget-in-focus-chip-know-it-all-1c46217dca9b) or `choicechip` widget? — Texv, Aug 17 '23 at 09:47

How to fill Wrap-Widget's available space?

0 Answers0