TabBar
The TabBar widget displays a horizontal row of tabs, allowing users to switch between different content views by tapping on the tabs. Each tab typically represents a different section or category of content.
It can be used in various types of apps, such as news apps with different categories, e-commerce apps with product categories, or social media apps with different sections like feeds, notifications, and messages.
TabBar widget
To add the TabBar widget to your app:
- 1.
- 2.By default, it adds three tabs with the page and shows the first one in the UI builder. In the widget tree, it is represented as Tab and TabBar Page. To see another tab in the UI builder, select the TabBar widget, move to the Properties Panel and set the Active Tab to the one you want to see.
- 3.To customize the Tab:
- 1.Select the Tab > Move to Properties Panel.
- 2.Use the Text property to change the label of the Tab.
- 3.
- 4.Tip: To only display Icon, remove the Text value.
- 4.Inside the TabBar Page, you can replace the existing Text widget with any widget of your choice.
- 5.To add a new tab, move to the Properties Panel > Active Page > click + Add Page.
If you want to adjust the height of a TabBar Page, wrap a TabBar widget inside a container and then set the container’s height.
Adding TabBar widget
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
To customize the tab label:
- 1.Select the TabBar widget > move to the Properties Panel > Label Properties.
- 2.To set different colors when the tab is selected and unselected use the Selected Color and Unselected Color property.
- 3.To add some space around the label, use the Label Padding property.
- 4.
Customizing label
By default, the tab in the TabBar widget is displayed with an indicator style, which includes a line under the tab to indicate the currently viewed page. However, you have the flexibility to change the tab's styling to achieve different visual effects. Instead of the indicator style, you can customize the tab to appear as a row of buttons or a toggle button, depending on your design requirements and preferences.
To change the tab styling:
- 1.Select the TabBar widget > move to the Properties Panel > Tab Properties.
- 2.Choose the Tab Bar Style from Indicator, Button and Toggle Button.
- 3.When the style is set to Indicator, you can set the indicator Color and Weight (thickness).
Customizing indicator style - 4.When the style is set to Button, you have the following options to customize:
- 1.To set the tab background color for selected and unselected states, use the Fill Color and Idle Fill Color, respectively.
- 2.To set the border color for selected and unselected states, use the Border Color and Idle Border Color, respectively. Also, make sure to set the Border Width to see the border.
- 3.To adjust the rounded corner of each tab, use the Border Radius property.
- 4.You can also set the Elevation and Button Margin properties for all tabs.
Customizing Button TabBar style
- 5.When the style is set to Toggle Button, you have the following options to customize:
- 1.To set the tab background color for selected and unselected states, use the Fill Color and Idle Fill Color, respectively.
- 2.To set a border around all tabs, use the Border Color and Border Width properties.
- 3.To add a divider between the tabs, use the Div Border Color and Border Width properties.
- 4.You can also set the Elevation and Button Margin properties for all tabs.
Customizing Toggle Button TabBar style
You might want to display a specific tab as selected as soon as the TabBar is loaded. To do so, move to the Properties Panel > General Properties > enter the Initial Tab Index value. Please note that the tab index starts from 0. So, if you want to set tab 1, you should enter 0. If you want to set tab 2, you should enter 1, and so on.
Tab index
Setting initial tab index
Sometimes you might want to change the default tab bar position i.e., from top to bottom. You can do so by navigating to Properties Panel > General Properties > changing the Tab Bar Position value.
Change the tab bar position
When you have a large number of tabs, they may not all fit on the screen. To address this, you can make the tabs scrollable, allowing the user to scroll horizontally to view all the tabs.
To make a TabBar scrollable, select the TabBar widget > move to the Properties Panel > General Properties > enable the Tab Bar Scrollable option.
If there are fewer tabs, you can control the alignment using the Tab Bar Horizontal Alignment property. However, for fewer tabs, you may not need to make them scrollable, but the option is available if required.
Making TabBar Scrollable
Margin adds a space between the TabBar and its border. To change the margin, select the TabBar widget, move to the Properties Panel > General Properties > find the Tab Bar Margin property, and change the values.
Set margin
By default, you can switch to another tab by swiping and clicking on the tab. In case you want to disable the swiping behavior, you can do so by navigating to Properties Panel > General Properties > disabling the Allow Swiping to Switch Tabs.
Disable swipe to switch tab
By default, when you switch to a different tab, the state of the previous tab is lost and gets rebuilt when you switch back to it. However, in certain scenarios, you may want to maintain the state of each tab to preserve user input, scroll positions, data from an API call, or any other relevant data. This is called keeping the tab state alive.
To keep the tab state alive, select the TabBar widget > Properties Panel > General Properties> enable Keep Tab State Alive.
Scroll position lost in the left side visual, scroll position preserved in the right side visual
Last modified 15d ago