title: Flutter warp with expanded children
body: <p>i have a list of texts that i need to wrap on the screen,
  the widget is a container with the text inside.
  to get the desired design, i use the wrap widget but i need the containers inside to expand to the maximum width with the same whitespace between.</p>
  <p>as you can see from the image, lines 1 and 2 are ok, happy accident, but line 3 needs to expand the three widgets so they will occupied the whole width.</p>
  <p><a href="https://i.stack.imgur.com/RnsuU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RnsuU.png" alt="enter image description here" /></a></p>
  <p>here is a sample of what i have now:</p>
  <pre><code>import 'dart:math';
  
  import 'package:flutter/material.dart';
  
  class HomePage extends StatelessWidget {
    const HomePage({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      final width = MediaQuery.of(context).size.width;
      return Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Container(
                height: MediaQuery.of(context).size.height * 0.2,
              ),
              Wrap(
                alignment: WrapAlignment.spaceBetween,
                runSpacing: 10,
                // spacing: 10,
                children: _getChildren(width),
              ),
              Container(
                height: MediaQuery.of(context).size.height * 0.2,
              ),
            ],
          ),
        ),
      );
    }
  
    List&lt;Widget&gt; _getChildren(double width) {
      var rnd = Random();
      var list = &lt;Widget&gt;[];
      for (var i = 0; i &lt; 10; i++) {
        final a = rnd.nextInt(20);
        var name = &quot;a&quot;;
        for (var i = 0; i &lt; a; i++) {
          name += &quot;a&quot;;
        }
        list.add(
          ConstrainedBox(
            constraints: BoxConstraints(
              maxWidth: width,
              minWidth: width * 0.1,
            ),
            child: Container(
              margin: const EdgeInsets.all(5),
              decoration: BoxDecoration(
                  color: Colors.amber,
                  border: Border.all(color: Colors.blue),
                  borderRadius: const BorderRadius.all(Radius.circular(15))),
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                child: Flexible(
                  fit: FlexFit.tight,
                  flex: 5,
                  child: Text(
                    name,
                    maxLines: 1,
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ),
        );
      }
      return list;
    }
  }
  
  </code></pre>
  <p>thanks</p>