ente/lib/ui/nav_bar.dart

library google_nav_bar;

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class GNav extends StatefulWidget {
  const GNav({
    Key key,
    this.tabs,
    this.selectedIndex = 0,
    this.onTabChange,
    this.gap,
    this.padding,
    this.activeColor,
    this.color,
    this.rippleColor,
    this.hoverColor,
    this.backgroundColor,
    this.tabBackgroundColor,
    this.tabBorderRadius,
    this.iconSize,
    this.textStyle,
    this.curve,
    this.tabMargin,
    this.debug,
    this.duration,
    this.tabBorder,
    this.tabActiveBorder,
    this.tabShadow,
    this.haptic,
    this.tabBackgroundGradient,
    this.mainAxisAlignment = MainAxisAlignment.spaceBetween,
  }) : super(key: key);

  final List<GButton> tabs;
  final int selectedIndex;
  final Function onTabChange;
  final double gap;
  final double tabBorderRadius;
  final double iconSize;
  final Color activeColor;
  final Color backgroundColor;
  final Color tabBackgroundColor;
  final Color color;
  final Color rippleColor;
  final Color hoverColor;
  final EdgeInsetsGeometry padding;
  final EdgeInsetsGeometry tabMargin;
  final TextStyle textStyle;
  final Duration duration;
  final Curve curve;
  final bool debug;
  final bool haptic;
  final Border tabBorder;
  final Border tabActiveBorder;
  final List<BoxShadow> tabShadow;
  final Gradient tabBackgroundGradient;
  final MainAxisAlignment mainAxisAlignment;

  @override
  State<GNav> createState() => _GNavState();
}

class _GNavState extends State<GNav> {
  int selectedIndex;
  bool clickable = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    debugPrint(
      '${(_GNavState).toString()} - build with index ${widget.selectedIndex}',
    );
    selectedIndex = widget.selectedIndex;

    return Container(
      color: widget.backgroundColor ?? Colors.transparent,
      child: Row(
        mainAxisAlignment: widget.mainAxisAlignment,
        children: widget.tabs
            .map(
              (t) => GButton(
                key: t.key,
                border: t.border ?? widget.tabBorder,
                activeBorder: t.activeBorder ?? widget.tabActiveBorder,
                borderRadius: t.borderRadius ?? widget.tabBorderRadius != null
                    ? BorderRadius.all(
                        Radius.circular(widget.tabBorderRadius),
                      )
                    : const BorderRadius.all(Radius.circular(100.0)),
                debug: widget.debug ?? false,
                margin: t.margin ?? widget.tabMargin,
                active: selectedIndex == widget.tabs.indexOf(t),
                gap: t.gap ?? widget.gap,
                iconActiveColor: t.iconActiveColor ?? widget.activeColor,
                iconColor: t.iconColor ?? widget.color,
                iconSize: t.iconSize ?? widget.iconSize,
                textColor: t.textColor ?? widget.activeColor,
                rippleColor:
                    t.rippleColor ?? widget.rippleColor ?? Colors.transparent,
                hoverColor:
                    t.hoverColor ?? widget.hoverColor ?? Colors.transparent,
                padding: t.padding ?? widget.padding,
                icon: t.icon,
                haptic: widget.haptic ?? true,
                leading: t.leading,
                curve: widget.curve ?? Curves.easeInCubic,
                backgroundGradient:
                    t.backgroundGradient ?? widget.tabBackgroundGradient,
                backgroundColor: t.backgroundColor ??
                    widget.tabBackgroundColor ??
                    Colors.transparent,
                duration: widget.duration ?? const Duration(milliseconds: 500),
                onPressed: () {
                  if (!clickable) return;
                  setState(() {
                    selectedIndex = widget.tabs.indexOf(t);
                    clickable = false;
                  });
                  widget.onTabChange(selectedIndex);

                  Future.delayed(
                      widget.duration ?? const Duration(milliseconds: 500), () {
                    setState(() {
                      clickable = true;
                    });
                  });
                },
              ),
            )
            .toList(),
      ),
    );
  }
}

class GButton extends StatefulWidget {
  final bool active;
  final bool debug;
  final bool haptic;
  final double gap;
  final Color iconColor;
  final Color rippleColor;
  final Color hoverColor;
  final Color iconActiveColor;
  final Color textColor;
  final EdgeInsetsGeometry padding;
  final EdgeInsetsGeometry margin;
  final TextStyle textStyle;
  final double iconSize;
  final Function onPressed;
  final String text;
  final IconData icon;
  final Color backgroundColor;
  final Duration duration;
  final Curve curve;
  final Gradient backgroundGradient;
  final Widget leading;
  final BorderRadius borderRadius;
  final Border border;
  final Border activeBorder;
  final List<BoxShadow> shadow;
  final String semanticLabel;

  const GButton({
    Key key,
    this.active,
    this.haptic,
    this.backgroundColor,
    this.icon,
    this.iconColor,
    this.rippleColor,
    this.hoverColor,
    this.iconActiveColor,
    this.text = '',
    this.textColor,
    this.padding,
    this.margin,
    this.duration,
    this.debug,
    this.gap,
    this.curve,
    this.textStyle,
    this.iconSize,
    this.leading,
    this.onPressed,
    this.backgroundGradient,
    this.borderRadius,
    this.border,
    this.activeBorder,
    this.shadow,
    this.semanticLabel,
  }) : super(key: key);

  @override
  State<GButton> createState() => _GButtonState();
}

class _GButtonState extends State<GButton> {
  @override
  Widget build(BuildContext context) {
    return Semantics(
      label: widget.semanticLabel ?? widget.text,
      child: Button(
        borderRadius: widget.borderRadius,
        border: widget.border,
        activeBorder: widget.activeBorder,
        shadow: widget.shadow,
        debug: widget.debug,
        duration: widget.duration,
        iconSize: widget.iconSize,
        active: widget.active,
        onPressed: () {
          if (widget.haptic) HapticFeedback.selectionClick();
          widget.onPressed();
        },
        padding: widget.padding,
        margin: widget.margin,
        gap: widget.gap,
        color: widget.backgroundColor,
        rippleColor: widget.rippleColor,
        hoverColor: widget.hoverColor,
        gradient: widget.backgroundGradient,
        curve: widget.curve,
        leading: widget.leading,
        iconActiveColor: widget.iconActiveColor,
        iconColor: widget.iconColor,
        icon: widget.icon,
      ),
    );
  }
}

class Button extends StatefulWidget {
  const Button({
    Key key,
    this.icon,
    this.iconSize,
    this.leading,
    this.iconActiveColor,
    this.iconColor,
    this.text,
    this.gap = 0,
    this.color,
    this.rippleColor,
    this.hoverColor,
    this.onPressed,
    this.duration,
    this.curve,
    this.padding = const EdgeInsets.all(25),
    this.margin = const EdgeInsets.all(0),
    this.active = false,
    this.debug,
    this.gradient,
    this.borderRadius = const BorderRadius.all(Radius.circular(100.0)),
    this.border,
    this.activeBorder,
    this.shadow,
  }) : super(key: key);

  final IconData icon;
  final double iconSize;
  final Text text;
  final Widget leading;
  final Color iconActiveColor;
  final Color iconColor;
  final Color color;
  final Color rippleColor;
  final Color hoverColor;
  final double gap;
  final bool active;
  final bool debug;
  final VoidCallback onPressed;
  final EdgeInsetsGeometry padding;
  final EdgeInsetsGeometry margin;
  final Duration duration;
  final Curve curve;
  final Gradient gradient;
  final BorderRadius borderRadius;
  final Border border;
  final Border activeBorder;
  final List<BoxShadow> shadow;

  @override
  State<Button> createState() => _ButtonState();
}

class _ButtonState extends State<Button> with TickerProviderStateMixin {
  bool _expanded;

  AnimationController expandController;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _expanded = widget.active;
    expandController =
        AnimationController(vsync: this, duration: widget.duration)
          ..addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    expandController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _expanded = !widget.active;
    if (_expanded) {
      expandController.reverse();
    } else {
      expandController.forward();
    }

    Widget icon = widget.leading ??
        Icon(
          widget.icon,
          color: _expanded ? widget.iconColor : widget.iconActiveColor,
          size: widget.iconSize,
        );

    return Material(
      type: MaterialType.transparency,
      child: InkWell(
        highlightColor: widget.hoverColor,
        splashColor: widget.rippleColor,
        borderRadius: BorderRadius.circular(100),
        // behavior: HitTestBehavior.opaque,
        onTap: () {
          widget.onPressed();
        },
        child: Container(
          padding: widget.margin,
          child: AnimatedContainer(
            curve: Curves.easeOut,
            // padding: EdgeInsets.symmetric(horizontal: 5),
            padding: widget.padding,
            // curve: Curves.easeOutQuad,
            duration: widget.duration,
            // curve: !_expanded ? widget.curve : widget.curve.flipped,
            decoration: BoxDecoration(
              boxShadow: widget.shadow,
              border: widget.active
                  ? (widget.activeBorder ?? widget.border)
                  : widget.border,
              gradient: widget.gradient,
              color: _expanded
                  ? widget.color.withOpacity(0)
                  : widget.debug
                      ? Colors.red
                      : widget.gradient != null
                          ? Colors.white
                          : widget.color,
              borderRadius: widget.borderRadius,
            ),
            child: FittedBox(
              fit: BoxFit.fitHeight,
              child: Stack(
                children: [
                  Align(alignment: Alignment.centerLeft, child: icon),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}