cupertino_tabbar

A highly customisable and simple widget for having iOS 13 style tab bars.

It is highly recommended to read the documentation and run the example project on a real device to fully understand and inspect the full range of capabilities.

Media | Description | Installation | How-to-Use

Recent

useShadow is added. If set to true, a shadow will be displayed under the indicator that is much more similar to the actual iOS version. See Media for examples.
allowScrollable, fittedWhenScrollable, animateWhenScrollable, animateUntilScrolled, outerHorizontalPadding and outerVerticalPadding are added. These all work towards making an easy-to-use scrollable tab bar. Please refer to the documentation and the examples for instructions and see Media for examples.

Warning

Variables previously named as horizontalPadding, verticalPadding and expand are now named innerHorizontalPadding, innerVerticalPadding and allowExpand.

Media

Watch on Youtube:

v1.1.0

v1.0.0

Description

This is a highly customisable and simple widget for having iOS 13 style tab bars.

How-to-Use

Simply create a CupertinoTabBar as shown in the example:

CupertinoTabBar(
  Colors.black                  //_backgroundColor
  Colors.white                  //_foregroundColor
  [...],                        //_widgets
  cupertinoTabBarValueGetter,   //_valueGetter
  (int index) {                 //_onTap
    setState(() {
      cupertinoTabBarValue = index;
    });
  },
  {Key key,
  useSeparators             : false,
  innerHorizontalPadding    : 10.0,
  innerVerticalPadding      : 10.0,
  borderRadius              : const BorderRadius.all(const Radius.circular(10.0)),
  curve                     : Curves.linearToEaseOut,
  duration                  : const Duration(milliseconds: 350),
  allowExpand               : false,
  allowScrollable           : false,
  fittedWhenScrollable      : false,
  animateWhenScrollable     : false,
  animateUntilScrolled      : false,
  outerHorizontalPadding    : 10.0,,
  outerVerticalPadding      : 0})
)

int cupertinoTabBarValue = 0;
int cupertinoTabBarValueGetter() => cupertinoTabBarValue;

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

Do not set both allowExpand and allowScrollable to true.

Notes

Any help, suggestion or criticism is appreciated!

Cheers.