Cosmos Software

Pub License

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


  • 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.


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


Watch on Youtube:




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


Simply create a CupertinoTabBar as shown in the example:

CupertinoTabBar(                  //_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.


Any help, suggestion or criticism is appreciated!



/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////