gistfile1.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:styled_widget/styled_widget.dart';

class StyledTabBar extends StatelessWidget {
  final Function(int) onTabPressed;
  final double width;
  final List<String> sections;
  final int index;
  static const List<String> defaults = ["test", "foo", "bar"];

  const StyledTabBar({Key key, this.width, this.sections = defaults, this.index, this.onTabPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    AppTheme theme = context.watch();

    /// Create List of expanding sections's to fill the tab bar
    List<Widget> clickableLabels = sections.map((e) => _ClickableLabel(e, theme)).toList();

    /// Calculate target alignment for animated bar
    double targetAlignX = -1 + (index * 1 / (sections.length - 1)) * 2;
    return Stack(
      children: <Widget>[
        /// Outline
        _RoundedBox(border: theme.greyWeak),

        /// Animated bar
        _RoundedBox(fill: theme.accent1)
            .fractionallySizedBox(widthFactor: 1 / sections.length)
            .alignment(Alignment(targetAlignX, 0), animate: true)
            .animate(.25.seconds, Curves.easeOut),

        /// Clickable Text labels
        Row(children: clickableLabels)
      ],
      ).height(30);
  }

  
  Widget _RoundedBox({double width, Color border, Color fill}) {
    return Container(
      width: width ?? null,
      decoration: BoxDecoration(
          color: fill,
          borderRadius: BorderRadius.circular(Corners.sm),
          border: Border.all(color: border?.withOpacity(.35) ?? Colors.transparent)),
      );
  }

  Widget _ClickableLabel(String e, AppTheme theme, [double fontScale = 1]) {
    bool isSelected = sections.indexOf(e) == index;
    return AnimatedDefaultTextStyle(
      duration: .25.seconds,
      style: TextStyle(color: isSelected ? Colors.white : theme.grey),
      child: Text(e.toUpperCase(), maxLines: 1, softWrap: false)
          .center()
          .gestures(onTapUp: (d) {
            return onTabPressed?.call(sections.indexOf(e));
          }, behavior: HitTestBehavior.opaque)
          .expanded(),
      );
  }
}