ZdsResponsiveTabBar class

A TabBar that solves certain issues with Material's TabBar. When using isScrollable is set to true in TabBar, the tabs will not fit the device's width. When isScrollable is set to false, the tabs all have the same size and do not change size to fit their children. This makes it awkward for certain situations where a non-scrollable tab bar is appropriate for certain big devices but not small ones, and where scrollable tab bars do not cover the entire width in big devices.

This widget solves this issue and makes the tabbar have responsive tab sizes and, if the tabbar does not need to be scrollable, acts as a non-scrollable tab bar fitting exactly the device width. This is done automatically, without needing to specify which tabbar version to use.

Typically used with a TabController and a TabBarView

return DefaultTabController(
  length: 3,
   child: Column(
    children: [
      ZdsResponsiveTabBar(tabs: [ZdsTab(), ZdsTab(),ZdsTab(),],),
      const Expanded(
        child: TabBarView(children: [View1(), View2(), View3()],),
      ),
    ],
  ),
);

If a controller is not provided, then a DefaultTabController ancestor must be provided instead. The tab controller's TabController.length must equal the length of the tabs list and the length of the TabBarView.children list.

See also:

  • ZdsTab, which defines the individual tabs to be used in this tab bar.
Inheritance
Available Extensions

Constructors

ZdsResponsiveTabBar({required List<ZdsTab> tabs, Key? key, TabController? controller, ZdsTabBarColor color = ZdsTabBarColor.surface, FontWeight? selectedLabelFontWeight, bool topSafeArea = true, bool bottomSafeArea = false, Color? indicatorColor, Color? selectedTextColor, Color? textColor})
Constructs a ZdsResponsiveTabBar.
const

Properties

bottomSafeArea → bool
Determine's whether component observes safe area at bottom of the screen.
final
color → ZdsTabBarColor
Sets the color scheme for each of the tabs and the tab bar itself.
final
controller → TabController?
An optional controller. If this is not provided, a DefaultTabController ancestor must be provided instead.
final
hashCode → int
The hash code for this object.
no setterinherited
indicatorColor → Color?
Indicator color.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectedLabelFontWeight → FontWeight?
The font weight of the label which has a textTheme of TextTheme.bodyLarge.
final
selectedTextColor → Color?
Custom color for selected tab text.
final
tabs → List<ZdsTab>
The list of tabs that will be displayed in this TabBar. The length of this list must match the controller TabController.length and the length of the TabBarView.children list.
final
textColor → Color?
Custom color for tab text.
final
topSafeArea → bool
Determine's whether component observes safe area at top of the screen.
final

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited