Widget Commonalities
Last updated
Last updated
While working with widgets, you may find some features or properties that are common across various widgets. This page will guide you on how to implement these common functionalities or modify properties that are uniformly applicable to multiple widgets.
Cannot make up your mind if you want to keep the Widget or not? Use this handy option to turn off the visibility of the Widget, and take better decisions with and without the Widget.
Use this option to align the position of the Widget, you can choose from 9 options: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center and Bottom Right.
Padding is the empty space around the outer side of the widget. You can add values on specific sides, Left, Top, Right and Bottom.
Margin is the outer space around the box. You can customize values on specific sides, Left, Top, Right and Bottom.
Want to set the background color for your widget? You can choose from default Theme Colors, or Custom Colors, or choose using HEX Values and Opacity.
Use this option to align the position of the Widget, you can choose from 9 options: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center and Bottom Right.
To add a border to any widget: First choose the Widget, go to Default Properties, and customize the below properties to add a border.
You can choose a Solid Border Style, or None.
Define the width of the Border using this property.
Change the color of your border using this property. Choose from default theme colors, or custom colors using HEX values and opacity.
To create a rounded border, use this property. Customize border radius values for top-left, top-right, bottom-right and bottom-left.
If you want your widget to be set to a fixed width on the screen, use this property. You can enter a value in either Pixels (PX), or in Percentage (%) for responsiveness.
Want to set your widget to a fixed height? Use this property. Enter a value either in Pixels (PX), or in Percentage (%).
Read more about adding Event Handlers here.
This contains customizations for your text.
You can choose from the preset Typography, or set custom Fonts from the Typography screen. The font size can be chosen quickly with this.
By turning this toggle ON, you can create a custom font for your text, by choosing the Font Family, Font Weight, Font Style and Line Height.
Font Family Choose from Nunito, Roboto, Poppins and Inter.
Font Weight Options available are Thin (100), Extra Light (200), Light (300), Regular (400), Medium (500), Semi Bold (600), Bold (700), Extra Bold (800) and Black.
Font Style Turn the toggle ON to change the text from Normal to Italic.
Font Weight If you want to set the font's weight manually, you can enter a value here.
Line Height The line-height property sets the height of a line box. It's commonly used to set the distance between lines of text.
Choose the color you want to display your text with.
Want to set the background color of the text? With this option, the color will only be applied on the background of the text.
Choose from various options, Line Underneath, Line Above and Line Through.
Customize the color for the Text Decoration.
Choose how you want your Text Decoration to appear, Dashed, Dotted, Double or Solid.
When you have a long text that won't fit in a single line, it will start from the new line. This is an optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated.
To set the max lines, move to the Widget Properties panel -> enter the Max Lines value.
This deals with how overflowing text should be handled. There are 4 options present:
clip → Clips the overflowing text to fix its container.
fade → Fades the overflowing text to transparent.
ellipsis → Use an ellipsis to indicate that the text has overflowed.
visible → Render overflowing text outside of its container.
This helps in aligning the Text horizontally. There are 4 options present:
start -> Aligns the text on the leading edge of the container.
end -> Aligns the text on the trailing edge of the container.
center -> Aligns the text in the center of the container.
justify -> Stretches lines of text that end with a soft line break to fill the width of the container.
The most common type is the Image Type of Network.
Here's how you can change the Image Type:
Under Widget Properties (on the right side of your screen), scroll down to Image Source section.
Find the Network property for Image Type and change it to Blurhash or Assets.
For Blurhash:
First generate the BlurHash string for your image.
Enter the BlurHash string in the text field and click Done.
Refresh to see your image.
Learn more about using BlurHash images here.
For Asset images, you need to first upload the images you want in your project.
Navigate to Settings, go to Media Assets and select Upload Media.
After uploading your image, you can go back to the Builder Tool, and select the Image widget. Under Image Source, select Asset and choose your image.
This is the Color of the track being filled by the indicator. You can choose from default Theme Colors, or Custom Colors, or choose using HEX Values and Opacity.
This is the progress indicator's color. You can customize it to whatever you want.
You can set the duration for the animation to complete here. Value entered is in milliseconds.
You can set the Animation End Length here.
This refers to the border radius of both the indicator and the track. You can provide a value in Pixels to give the indicator and track a border radius.
You can choose from 40+ Curve styles.
You can view the various Curve styles here.
