overflow_button_bar.dart

import 'package:flutter/material.dart';

/// This class demonstrates how to replace a [ButtonBar[ which specifies a
/// [MainAxisAlignment] with an [OverflowBar].
///
/// By default the ButtonBar separates the buttons by 8 and pads either
/// end of its row with 8. If the alignment is [MainAxisAlignment.spaceAround]
/// the the padding at the ends is reduced to 4, and if the alignment is
/// [MainAxisAlignment.spaceEvenly] the padding at the ends is zero.
class OverflowButtonBar extends StatelessWidget {
  OverflowButtonBar({
    Key? key,
    this.alignment,
    this.children = const <Widget>[],
  }) : super(key: key);


  final MainAxisAlignment? alignment;
  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    late final EdgeInsets padding;
    switch (alignment) {
      case MainAxisAlignment.start:
      case MainAxisAlignment.center:
      case MainAxisAlignment.end:
      case MainAxisAlignment.spaceBetween:
        padding = const EdgeInsets.symmetric(horizontal: 8);
        break;
      case MainAxisAlignment.spaceAround:
        padding = const EdgeInsets.symmetric(horizontal: 4);
        break;
    case MainAxisAlignment.spaceEvenly:
    case null:
        padding = EdgeInsets.zero;
        break;
    }

    return Padding(
      padding: padding,
      child: OverflowBar(
        children: children,
        alignment: alignment,
        spacing: 8,
      ),
    );
  }
}

class DemoButtonBar extends StatelessWidget {
  DemoButtonBar(this.alignment);

  final MainAxisAlignment alignment;

  List<Widget> padFirstAndLast(List<Widget> children) {
    if (alignment == MainAxisAlignment.spaceEvenly || alignment == MainAxisAlignment.spaceAround) {
      return children;
    }

    return <Widget>[
      Padding(padding: const EdgeInsetsDirectional.only(start: 8), child: children.first),
      ...children.sublist(1, children.length - 1),
      Padding(padding: const EdgeInsetsDirectional.only(end: 8), child: children.last),
    ];
  }

  @override
  Widget build(BuildContext context) {
    const List<Widget> items = <Widget>[
      Text('One'),
      Text('Two'),
      Text('Free'),
      Text('Four'),
    ];
    final Color backgroundColor = Directionality.of(context) == TextDirection.ltr ? Colors.green : Colors.yellow;

    return Padding(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            color: backgroundColor.withOpacity(0.15),
            child: ButtonBar(children: items, alignment: alignment),
          ),
          Container(
            color: backgroundColor.withOpacity(0.25),
            child: OverflowButtonBar(
              children: items,
              alignment: alignment,
            ),
          ),
        ],
      ),
    );
  }
}

class AlignmentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Directionality(
              textDirection: TextDirection.ltr,
              child: Column(
                children: <Widget>[
                  DemoButtonBar(MainAxisAlignment.start),
                  DemoButtonBar(MainAxisAlignment.center),
                  DemoButtonBar(MainAxisAlignment.end),
                  DemoButtonBar(MainAxisAlignment.spaceBetween),
                  DemoButtonBar(MainAxisAlignment.spaceAround),
                  DemoButtonBar(MainAxisAlignment.spaceEvenly),
                ],
              ),
            ),
            Directionality(
              textDirection: TextDirection.rtl,
              child: Column(
                children: <Widget>[
                  DemoButtonBar(MainAxisAlignment.start),
                  DemoButtonBar(MainAxisAlignment.center),
                  DemoButtonBar(MainAxisAlignment.end),
                  DemoButtonBar(MainAxisAlignment.spaceBetween),
                  DemoButtonBar(MainAxisAlignment.spaceAround),
                  DemoButtonBar(MainAxisAlignment.spaceEvenly),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: AlignmentDemo()));
}