Button Group

button_group.dart

import 'package:flutter/material.dart';
import 'package:mobile/utils/get_text_color.dart';

class ButtonGroup extends StatelessWidget {
  ButtonGroup({
    Key key,
    @required this.index,
    @required this.length,
    @required this.titles,
    @required this.onPressed,
    this.buttonBuilder,
  }) : super(key: key);

  final int index;
  final int length;
  final List<String> titles;
  final Function(int selectedIndex) onPressed;
  final Function(BuildContext context, int i) buttonBuilder;

  final ShapeBorder leftMostShape = const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomRight: Radius.zero,
      topRight: Radius.zero,
      bottomLeft: Radius.circular(10),
      topLeft: Radius.circular(10),
    ),
  );
  final ShapeBorder centerShape = const RoundedRectangleBorder();
  final ShapeBorder rightMostShape = const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.zero,
      topLeft: Radius.zero,
      bottomRight: Radius.circular(10),
      topRight: Radius.circular(10),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        ...Iterable<int>.generate(length).map(
          (currentIndex) {
            Color backgroundColor = index == currentIndex
                ? Theme.of(context).accentColor
                : Color.lerp(
                    Theme.of(context).disabledColor,
                    Theme.of(context).canvasColor,
                    0.95,
                  );

            Color textColor = getTextColor(backgroundColor);

            return RaisedButton(
              color: backgroundColor,
              shape: currentIndex == 0
                  ? leftMostShape
                  : currentIndex == length - 1 ? rightMostShape : centerShape,
              child: Text(
                titles[currentIndex],
                style: Theme.of(context).textTheme.body1.copyWith(
                      color: textColor,
                    ),
              ),
              onPressed: () => onPressed(currentIndex),
            );
          },
        ),
      ],
    );
  }
}