Tabs

Tabs

MUITabs

The MUITabs widget is a flexible and customizable tab bar for Flutter applications, designed to enhance navigation and content organization. It supports both horizontal and vertical orientations and provides options for customization such as underlining and transparency.

Parameters:

• tabs: List of MUITab objects, where each tab has a label and an optional icon.

• tabIndex: Index of the initially selected tab. Default is 0.

• backgroundColor: Background color of the tab bar. Default is a light grayish color.

• curve: The curve for the animation when switching tabs. Default is Curves.easeInOut.

• onChanged: Callback function that is called when a tab is tapped. It provides the index of the selected tab.

• indicatorColor: Color of the tab indicator.

• indicatorBorderRadius: Border radius of the tab indicator.

• maxTabSize: Maximum size for an individual tab. The final tab size is calculated based on the available space.

• borderRadius: Border radius of the container that wraps around the tab bar.

• labelStyle: Style for the tab labels.

• axis: The axis in which the tab bar should be oriented (horizontal or vertical).

• animationDuration: Duration of the animation when switching tabs.

• underline: Whether to use an underline for indicating the selected tab.

• underlineHeight: Height of the underline if underline is set to true.

Factory Constructors

MUITabs.transparent

Creates a transparent tab bar.

MUITabs.underlined

Creates a tab bar with an underline for the selected tab.

Example usage

Default

modularuiwidgetsverdant-lokum-9bd5c2.netlify.app

Default Tab

ValueListenableBuilder(
            valueListenable: tabIndexNotifier,
            builder: (context, tabIndex, child) {
              return MUITabs(
                tabIndex: tabIndex,
                onChanged: (index) {
                  tabIndexNotifier.value = index;
                },
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),

Transparent

modularuiwidgetsverdant-lokum-9bd5c2.netlify.app

Transparent Tab

ValueListenableBuilder(
            valueListenable: transparentTabIndexNotifier,
            builder: (context, tIndex, child) {
              return MUITabs.transparent(
                tabIndex: tIndex,
                onChanged: (index) {
                  transparentTabIndexNotifier.value = index;
                },
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),

Underlined

modularuiwidgetsverdant-lokum-9bd5c2.netlify.app

Underlined Tab

ValueListenableBuilder(
            valueListenable: underlinedTabIndexNotifier,
            builder: (context, tIndex, child) {
              return MUITabs.underlined(
                tabIndex: tIndex,
                onChanged: (index) {
                  underlinedTabIndexNotifier.value = index;
                },
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),

Vertical

modularuiwidgetsverdant-lokum-9bd5c2.netlify.app

Vertical Tab

ValueListenableBuilder(
            valueListenable: verticalTabIndexNotifier,
            builder: (context, tabIndex, child) {
              return MUITabs(
                axis: Axis.vertical,
                tabIndex: tabIndex,
                onChanged: (index) {
                  verticalTabIndexNotifier.value = index;
                },
                underline: false,
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),