TabBar
The TabBar widget is used to show different categories of content.
You can use the TabBar widget to quickly glance at each option and move between the categories by swiping or clicking on the Tab.

Add a TabBar to Your Project

To add the TabBar widget in your project:
Simply drag the TabBar widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
The default TabBar comes with 3 Tabs named Example 1, Example 2, Example 3, and a Text widget inside all the TabBar pages named Tab View 1, Tab View 2, and Tab View 3.

Customizing the TabBar

You may want to customize the default TabBar to match your design. You can customize both the Tab widget and the TabBar Page widget.
To customize the Tab:
    Select the first Tab from the widget tree or from the canvas area.
    Move to Property Editor, scroll down to Tab Label property under the Text Section. Change the name from Example 1 to Flight.
    To set the icon, click on the None button (below Text section). Search and select the icon name with flight.
    Change the Icon Size to any value (below flight icon).
    Click on the box next to Unset (under Icon Color), select and color, and then click Use Selected Color. You can also click on Unset and enter a Hex Code directly.
    To get some space around the icon, enter a value in the Icon Margin section.
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.
To customize the TabBar Page:
    Select the first TabBar Page from the widget tree or from the canvas area.
    Inside the TabBar Page, you can replace the Text widget with any widget of your choice.
    For now, just change the name of the Text widget to Flight List.
    Get the Text widget in the center by entering the value 0 in both Horizontal Alignment and Vertical Alignment under the Alignment section.
You can only add widgets to an active TabBar page. To make a TabBar page active, locate the Active Tab section of the Properties Panel and select the desired tab from the dropdown.
To change the TabBar displayed in the UI Builder:
    Select the TabBar widget from the widget tree or from the canvas area.
    Move to Property Editor and identify the Active Tab section.
    Change it to any Tab from the options.
Modifying the other two tabs for showing Train and Car using the instructions above looks like this:

Adding or Removing Tab

To add a new Tab:
    Select the TabBar widget from the widget tree or from the canvas area.
    Move to Property Editor and identify the Active Tab section.
    Click on the Dropdown and select + Add Tab.
To remove any existing Tab:
    Select the Tab (which you want to remove) from the widget tree or from the canvas area.
    Hit the Delete button on the keyboard and the Tab will be deleted from the widget tree. You can also delete the Tab by right-clicking in the widget tree and selecting Cut.

Changing the Properties

The Properties Panel can be used to customize the behavior of your TabBar widget.

Add Padding

Adding a padding value will adjust the overall size of the TabBar widget.
To add Padding:
    Select the TabBar from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Padding section.
    Enter the desired value.
    Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

Changing the Color for The Selected/Unselected Tab

To change the color of the selected Tab (the Tab a user is viewing):
    Select the TabBar from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Selected Color under the Label Properties section.
    Click on the Unset text, enter the color code, and click Use Selected Color. You can also change the color by either clicking on Palette or the Simple button.
    Now, find the Unselected Color (below the Selected Color) and click on the Unset text. Enter the color code and click Use Selected Color.

Customize the Indicator

To change the color and height of the indicator (the line under the Tab text that indicates which page is being viewed):
    Select the TabBar from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Find the Color input box and click on the Unset text, Enter the color code and click Use Selected Color.
    To increase the thickness of the indicator, enter a value in Weight.

Changing the Tab Selection

When your app runs, you will notice that the first tab is selected by default. Using the Initial Index property you can change this behavior.
To change the Tab selection:
    Select the TabBar from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the General Properties section.
    Enter the value in the Initial Index input. Enter the value that is equal to the TabBar Page you want to show.
      Leaving this blank or entering 0 will should the first tab (Flight in the example below).
      Entering a value of 1 will show the 2nd page (Train in the example below).
The value for Initial Index should not be greater than the number of Tabs -1. For example, if you have 3 three tabs, you should not enter a value greater than 2.

Making TabBar Scrollable

When you add a large number of tabs, they won't all be displayed on the screen. In this situation, you can make the tabs scrollable.
To make a TabBar scrollable:
    Select the TabBar from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the General Properties section.
    Checkmark the Scrollable check box.
Last modified 8d ago