Repository: flutter
Issue: Allow Wrap widget to have a WrapAlignment.justify
Labels: c: new feature,framework,a: quality,c: proposal,P3,team-framework,triaged-framework

I'm trying to create my UI where the objects inside a Wrap are justified, but it doesn't seem to be possible at the moment. This is what I currently have:

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:       Wrap(
        spacing: 20,
        runSpacing: 10,
        children: [
          ToggleButton(
          title: 'Button 1',
          selected: false,
        ),
                    ToggleButton(
          title: 'My second button',
          selected: false,
        ),
                    ToggleButton(
          title: 'Third button',
          selected: false,
        ),
                    ToggleButton(
          title: 'This is button number four',
          selected: false,
        ),
                    ToggleButton(
          title: 'Final button long',
          selected: false,
        )
        ],
      ),
      ),
    );
  }
}

class ToggleButton extends StatefulWidget {
  const ToggleButton(
      {this.selected = false, this.title = '', this.onSelectedChanged});

  final bool selected;
  final String title;
  final Function(String title, bool selected) onSelectedChanged;

  @override
  _ToggleButtonState createState() => _ToggleButtonState();
}

class _ToggleButtonState extends State<ToggleButton> {
  bool selected;

  @override
  void initState() {
    selected = widget.selected;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 36,
      child: RaisedButton(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(widget.title),
            SizedBox(width: 15),
            IgnorePointer(
              child: Checkbox(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                value: selected,
                onChanged: (bool value) {},
              ),
            )
          ],
        ),
        color: selected
            ? Colors.blue
            : Colors.white,
        textColor: selected
            ? Colors.white
            : Colors.black.withAlpha(80),
        onPressed: () {
          setState(() {
            selected = !selected;
            if (widget.onSelectedChanged != null) {
              widget.onSelectedChanged(widget.title, selected);
            }
          });
        },
      ),
    );
  }
}

```

Which gives me this:

[![enter image description here][1]][1]

But what I'm trying to achieve is this:

[![enter image description here][2]][2]

Basically to have each row expand to fill the available space. Is that possible? Maybe I need to build my `ToggleButton` differently?

I'm aware of the alignment: `WrapAlignment.spaceBetween` but that doesn't work, specially when your container is smaller and you end up with this:

[![enter image description here][3]][3] 

or this:

[![enter image description here][4]][4]

which are both pretty ugly...

So basically I'm proposing we have a WrapAlignment.justify which would solve this situation. 


  [1]: https://i.stack.imgur.com/ac6Js.png
  [2]: https://i.stack.imgur.com/biDoH.png
  [3]: https://i.stack.imgur.com/coqbL.png
  [4]: https://i.stack.imgur.com/xRbN7.png