Search
⌃K

BottomBarItem

The Bottombaritem widget is an interactive button within either material's BottomNavigationBar with an icon and title.
This class is rarely used in isolation. It is typically embedded in one of the bottom navigation widgets.

Add an Bottombaritem to your project

To add an Bottombaritem to your project:
Add the Bottombaritem directly from the Tree Area.
The default Bottombaritem widget shows the plus icon and Label text.

Styling a Bottombaritem

Using various properties under the Bottombaritem Style section, you can customize the Bottombaritem widget as per your design.

Changing the Size

To change the size of the Bottombaritem:
  • Select the Bottombaritem from the Tree Area.
  • Move to the Property Editor (on the right side of your screen).
  • There are two ways to set the image dimensions:
    • To set to an exact size, select PX and enter the desired values.
    • To set the dimensions as a % of the screen size, select % and enter the desired value.

Adding a Color

To change the color to the Bottombaritem:
  • Select the Bottombaritem from the Tree Area
  • Move to the Property Editor and navigate to the Fill.
  • Enter the color code or simply choose it either from Palette.

Styling the Text

Using various properties under the Button Text section, you can customize the text of the Button widget as your design.
​Here are the instructions on styling the Text.

Adding Action

To perform any action on click of the Button, add an Action in Teta. You can find the instructions on adding the Action here.
​

​