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

Overview

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() => 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.





You might also like...

A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.

extended_tabs Language: English | ไธญๆ–‡็ฎ€ไฝ“ A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs whe

Dec 13, 2022

Add beautiful and trending tab indicators directly to your default Flutter TabBar

Add beautiful and trending tab indicators directly to your default Flutter TabBar

Add beautiful and trending tab indicators directly to your default Flutter TabBar. Features ๐Ÿ’š Supports Android, iOS, Web Can be directly added to the

Dec 23, 2022

"FlutterMoneyFormatter" is a Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization.

FlutterMoneyFormatter FlutterMoneyFormatter is a Flutter extension to formatting various types of currencies according to the characteristics you like

Jan 1, 2023

An Android Launcher (having Ubuntu-Gnome flavour) build with Flutter

An Android  Launcher (having Ubuntu-Gnome flavour) build with Flutter

Ubuntu Launcher Introduction Ubuntu launcher is an custom android launcher build with Flutter with a Ubuntu-Gnome look. Though flutter is a cross plat

Dec 22, 2022

SSH no ports provides ssh to a remote Linux device with out that device having any ports open

Ssh! No ports ssh no ports provides a way to ssh to a remote linux host/device without that device having any open ports (not even 22) on external int

Dec 21, 2022

Iosish indicator - ๐ŸŽ Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Iosish indicator - ๐ŸŽ Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Iosish indicator - ๐ŸŽ Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Apr 1, 2022

Library to create custom Toggle / Tab on your apps

Library to create custom Toggle / Tab on your apps

Flutter Tab Toggle A Beautiful and Simple Tab/Toggle switch widget. It can be fully customized with desired icons, width, colors, text, corner radius

Sep 6, 2022

Notched Bottom Tab Bar Example using Flutter Framework

Notched Bottom Tab Bar Example using Flutter Framework

bottom_tab_bar Notched Bottom Tab Bar Example using Flutter Framework Getting Started Flutter tutorial explaining how to create a notched shaped botto

Dec 6, 2022

A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

Flutter Colorful TabBar A colorful TabBar for Flutter where each tab has a color (inspired by SmartNews app). Getting Started Add this to your package

Jun 17, 2022
Comments
Owner
AliYigitBireroglu
"It's true that we love one another, I love programming like a little brother."
AliYigitBireroglu
A very easy-to-use navigation tool/widget for having iOS 13 style stacks.

cupertino_stackview A very easy-to-use navigation tool/widget for having iOS 13 style stacks. It is highly recommended to read the documentation and r

AliYigitBireroglu 49 Nov 18, 2022
A dart library to create Progress Bars in console.

A package for creating an awesome progress bar in console. Usage Options: total : Total number of steps desc : Simple text shown before the bar (optio

Rohit V 3 Oct 8, 2022
A Flutter clock face with moving bars

BarBar Clock | Web demo ?? Listed in Honorable Mentions at flutter.dev/clock ?? Clock face for the Flutter Clock Challenge. This clock face shows time

Alexander Troshkov 19 Jun 29, 2022
A simple widget for having UI elements that respond to taps with a spring animation.

spring_button A simple widget for having child widgets that respond to gestures with a spring animation. Media | Description | How-to-Use Media Watch

AliYigitBireroglu 73 Oct 26, 2022
A tab bar widget for Flutter ๐Ÿ’™ with point indicator.

flutter_point_tab_bar A tab bar widget with point indicator. Demo Usage TabBar( controller: _tabController, indicator: PointTabIndicator(

Hiแปƒn Lรช 5 Sep 16, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 2022
Neumorphic style - Example app with Flutter that displays a neumorphic style container

Flutter Neumorphic Style Example App Example app with Flutter that displays a ne

Piyush Nagpal 2 Mar 24, 2022
Clean, beautiful and customisable calendar package for flutter

Word from creator Hello ?? , Yeah I know Clean calendar is still very new, but don't be put off by it because it will be well-maintained for a very, v

Deepanshu Chaudhary 8 Dec 15, 2022
A customisable height slider for Flutter.

Height Slider Widget for Flutter โœจ Demo ?? Usage class _MyHomePageState extends State<MyHomePage> { int height = 170; @override Widget build(Bu

Coval Solutions 15 Aug 21, 2021