Theme Widgets
Creating a theme for widgets ensures that your app looks consistent and has a cohesive design. The Theme widgets can be reused, making it easy to update the styles of your app. If you decide to change any property of the widget, such as color scheme or fonts, you can update the theme widget instead of going through every widget individually. This can save a lot of time and effort, especially in larger projects.
For example, creating theme widgets for different types of buttons such as 'primary_button', 'secondary_button', and 'tertairy_button' with specific attributes like width, color, icon, border radius, and padding. Then, these widgets can be directly added to a page or applied to an existing widget.
Adding theme widgets
To add a theme widget to your app, you must create it and then use it on your page by dragging it from the Widget Palette or applying it to the existing widget.
Here's how you do it:
Open the Theme Settings (from the navigation menu) > Theme Widgets.
Click Create Widget button.
Enter the Theme Widget Name and then select the widget.
Create a theme for the widget using its properties available on the right side and then click Save.
You can also make any widget a theme widget by right-clicking and selecting Save as Theme Style Widget.
Now, you can add this widget directly from the widget tree or Widget Palette.
To apply this widget styling to an existing widget, select the widget, move the Properties Panel > Widget Styling > click Theme Style Unset > select the theme widget.
After applying theme widget styling, any previously set properties will be overridden except the properties with Set from Variable. However, you are free to modify the existing widget properties as you like.
Video guide
If you prefer watching a video tutorial, here's the one for you:
FAQs
How is theme widget different from creating a template and component?
The Theme Widget allows you to customize the visual appearance of a single widget, whereas templates consist of multiple widgets that create a unique UI layout with a specific purpose. On the other hand, components are fully-featured custom widgets that combine multiple widgets and actions to complete a task.
Last Updated Date: September 4, 2023
Last updated
