cupertino_tabbar

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

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() => cupertinoTabBarIValue;

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.





Libraries

cupertino_tabbar