This week we launched theme widgets, 3 new actions, a searchable dropdown, made big upgrades to Theme Settings and Team Components, and launched 3 new tutorials 🚀
Theme Widgets + Big Theme Upgrades 🎨
Theme Widgets allow you to define a style/variation for most widgets and reuse it across the app. Similar to theme text styles, updating a theme widget will update all usages of the theme widget, while respecting overrides.
For example, you could define a button widget, "PrimaryButton", with a specific width, color, icon, border radius, and padding. You can then drag and drop this Theme Widget directly into a page or apply this styling to an existing widget.
Plus we've made some big upgrades to how you work with themes:We've moved all theme related items (e.g. Design System, Colors) to the Theme Section (left navigation menu)We've expanded our theme colors so you create 16 predefined styles (plus any Custom Colors you want to add)We've expanded our typography settings so that you can create 15 predefined styles per device type (mobile, tablet, desktop)
Searchable Dropdown
A searchable dropdown combines the functionality of a dropdown list with the ability to search and filter. It helps users to quickly and easily find what they are looking for. This is especially helpful when you have a long list of items.
To use this, select your Dropdown > toggle on the new isSearchable option in the right properties panel.
Custom Code in Team Components
You can now use Team Custom Functions and Custom Actions in shared Team Components. This allows you to build powerful UI/UX patterns that can be reused across projects.
When you want to make any changes, just update the main component! All projects using this component will automatically be updated 🔥
Action Upgrades 🎬
We've upgraded actions to include some powerful new functionality:
Callback Parameters In Custom Actions: You can now add action parameters to custom actions. For example, you could use a custom action to call an API and then trigger specific actions based on API result (e.g. if status is expired > log user out).
Clear Query Cache Action: Clearing a query cache removes all the cached query results from the memory. This is useful in situations where the cached results are outdated or taking up too much memory.
On Initialization Trigger: You can now trigger actions when a component loads.
Other Improvements 🏗️
You can now set SnackBar, BottomSheet, ChoiceChips, Icon, Page, and Checkbox color from variable.
onDoubleTap, onLongPress, and onSubmit now work in Preview mode.
You can now set the hover color for icons in a button.
You can now set hover and disabled styles for icon buttons and floating action buttons (FAB).
We now automatically append action output names with a number in order to avoid duplicates while copy/pasting.
Bug Fixes 🐛
Here are some of the recent bug fixes we've released. Please see the GitHub Issue Tracker for the most up to date status of all reported bugs.
Fixed an issue that caused infinite loading after purchasing an extra custom domain.
Fixed an issue where PDF Viewer was blank in Run/Test mode when using network URL.
Fixed an issue preventing translation of strings in actionsFixed in issue causing private APIs to give 400 error.
Fixed an issue causing custom function string comparisons to not work correctly.
New Features We're Working On 🏗️
Collaboration improvements
Custom code in main.dart
Some supa cool auth updates
Action components