Flutter Wrap widgets with justify alignment

Question

Is it possible to justify align widgets within the Wrap widget? This is what I currently have:

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 {
  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: [
            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:

But what I'm trying to achieve is this:

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:

or this:

which are both pretty ugly...

Thank you!

user_10746978 · Answer

From the Flutter documentation:

alignment → WrapAlignment

How the children within a run should be placed in the main axis.

Reading the WrapAlignment enumeration I suppose you want to have:

Wrap(
alignment: WrapAlignment.spaceBetween, 
[...]
)

Please note that this will not represent exactly what you drew in your picture. This will not enlarge the children to make it fill the remaining space. This will divide the empty space between the children elements, with no space before the first or after the last, which is the closes to a "Justify Alignment" equivalent.

Flutter Wrap widgets with justify alignment

1 Answers