Add widget rewrites + component migration #39
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "label": "Responsiveness" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
|
|
||
| # ConditionalBuilder | ||
|
|
||
| The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](/advanced-functionality/conditional-logic#single-condition) or [multiple](/advanced-functionality/conditional-logic#multiple-conditions-and-or)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app. | ||
|
|
||
| For example, displaying different charts based on user roles. For team members, an individual progress chart can be shown. Team leads can view the overall progress of the entire team, while project managers can see over project progress chart. Just like the below: | ||
|
|
||
|  | ||
|
|
||
| ## Adding ConditionalBuilder widget | ||
|
|
||
| To add the `ConditionalBuilder` widget to your app: | ||
|
|
||
| 1. Add the **ConditionalBuilder** widget (from the **Base Elements**) to where you want to display dynamic widgets. | ||
| 5. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](/advanced-functionality/conditional-logic) by clicking on **UNSET**. | ||
| 8. Now, besides the **THEN**, click **Empty**. This will automatically select the **IF** widget in the widget tree. Inside that, add a widget that you want to display if this condition is true. | ||
| 11. To add one more condition-based widget, click on the "+" button, add a condition for the **ELSE IF** section, and add a widget inside the **Else If** widget in the widget tree. | ||
| 14. If none of the conditions are satisfied, add a default widget to display inside the **Else** widget. | ||
| 17. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](/getting-started/ui-builder/canvas-area). You can see only one widget at a time. | ||
|
|
||
| <div class="video-container"><iframe src="https://www.loom. | ||
| com/embed/fe8edb48bdf744abab13f3ba7f925c5c?sid=85533669-195d-4f5e-aeae-029ceee40cb5" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div> | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
|
|
||
| # Wrap | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,279 @@ | ||
|
|
||
|
|
||
| # Badge | ||
|
There was a problem hiding this comment. Shouldn't this be under the 'Built-in Widgets' section? Also, Barcode, Draggable, Expandable, and so on. I understand that these are not standard Flutter widgets (we might have used a package for these) but putting them under the 'Built-in Components' section might confuse users with the components available while creating a new component. |
||
|
|
||
| The Badget widget indicates the number of items that need your attention. Typically it's a medium-sized dot that floats over other widgets such as IconButton. | ||
|
|
||
| For example, You could use the badge widget to show the number of unread notifications and items in your shopping cart. | ||
|
|
||
|  | ||
|
|
||
| ## Adding Badge widget | ||
|
|
||
| Here's an example of how you can add the Badge widget to your project: | ||
|
|
||
| 1. First, drag the **Badge** widget from the Base Elements tab and carefully drop it into the | ||
| Actions section of the AppBar. | ||
| 5. Now, add the **IconButton** widget inside the **Badge** widget. Customize the Icon and its color as per your requirement. | ||
| 8. Select the **Badge** widget, move to the properties panel, and set the **top** side padding to 5 and **right** side padding to 15. | ||
|
|
||
|
|
||
| <div style={{ | ||
| position: 'relative', | ||
| paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding | ||
| height: 0, | ||
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/5cTUQAbE32UQzrdnFwtO?embed&show_copy_link=true" | ||
| title="" | ||
| style={{ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| colorScheme: 'light' | ||
| }} | ||
| frameborder="0" | ||
| loading="lazy" | ||
| webkitAllowFullScreen | ||
| mozAllowFullScreen | ||
| allowFullScreen | ||
| allow="clipboard-write"> | ||
| </iframe> | ||
| </div> | ||
|
|
||
| <p></p> | ||
|
|
||
| ## Customizing | ||
|
|
||
| You can customize the appearance and behavior of the badge widget using the various properties | ||
| available under the **Properties Panel**. | ||
|
|
||
| ### Setting badge text | ||
|
|
||
| You can set the badge text that appears inside the badge. Usually, it's a numeric value. | ||
|
|
||
| To set the badge text: | ||
|
|
||
| 1. Select the **Badge** widget from the widget or the canvas area. | ||
| 5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. | ||
| 8. Find the **Text** property and enter a value. You would probably set this value from the variable or field from the backend database, such as the API response variable and Firestore document field. To do so, click on the **Set from Variable**. | ||
|
|
||
| <p></p> | ||
|
|
||
| <div style={{ | ||
| position: 'relative', | ||
| paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding | ||
| height: 0, | ||
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/TJTALzWwwYWwj7vCTMmJ?embed&show_copy_link=true" | ||
| title="" | ||
| style={{ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| colorScheme: 'light' | ||
| }} | ||
| frameborder="0" | ||
| loading="lazy" | ||
| webkitAllowFullScreen | ||
| mozAllowFullScreen | ||
| allowFullScreen | ||
| allow="clipboard-write"> | ||
| </iframe> | ||
| </div> | ||
|
|
||
| <p></p> | ||
|
|
||
| ### Styling badge text | ||
|
|
||
| To change the badge text style: | ||
|
|
||
| 1. Select the **Badge** widget from the widget or the canvas area. | ||
| 5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. | ||
| 8. Find the **Theme Text Style** property and change the style as per instructions | ||
| [here](../../widgets/built-in-widgets/text.md). | ||
|
|
||
| ### Show/hide badge | ||
|
|
||
| You might want to hide the badge widget initially and only show it when some items need the user's attention—for example, showing the notification badge only when there are new/unread notifications. | ||
|
|
||
| To show/hide the badge widget: | ||
|
|
||
| 1. Select the **Badge** widget from the widget or the canvas area. | ||
| 5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. | ||
| 8. Find the **Show Badge** property and check/uncheck to show/hide the badge. Most probably, you would set this value from the variable such as the app state variable and variable from API response. To do so, click on the **Set from Variable**. | ||
|
|
||
| <div style={{ | ||
| position: 'relative', | ||
| paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding | ||
| height: 0, | ||
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/Qi5uf3nPfZHwCoY7VA33?embed&show_copy_link=true" | ||
| title="" | ||
| style={{ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| colorScheme: 'light' | ||
| }} | ||
| frameborder="0" | ||
| loading="lazy" | ||
| webkitAllowFullScreen | ||
| mozAllowFullScreen | ||
| allowFullScreen | ||
| allow="clipboard-write"> | ||
| </iframe> | ||
| </div> | ||
|
|
||
| ### Changing badge color | ||
|
|
||
| To change the badge color: | ||
|
|
||
| 1. Select the **Badge** widget from the widget or the canvas area. | ||
| 5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. | ||
| 8. Find the Badge Color property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected colorand enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. | ||
|
|
||
| <div style={{ | ||
| position: 'relative', | ||
| paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding | ||
| height: 0, | ||
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/IwwmHUITgPBfFkK5VWI4?embed&show_copy_link=true" | ||
| title="" | ||
| style={{ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| colorScheme: 'light' | ||
| }} | ||
| frameborder="0" | ||
| loading="lazy" | ||
| webkitAllowFullScreen | ||
| mozAllowFullScreen | ||
| allowFullScreen | ||
| allow="clipboard-write"> | ||
| </iframe> | ||
| </div> | ||
|
|
||
| ### Changing elevation | ||
|
|
||
| To change the elevation (depth or Z-axis) of the badge: | ||
|
|
||
| 1. Select the **Badge** widget from the widget or the canvas area. | ||
|
|
||
| 5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. | ||
| 8. Find the **Elevation** input box and enter the value to see the drop shadow effect below the badge. The Higher value sets the bigger size of the shadow, and the 0 value removes the shadow. | ||
|
|
||
| <div style={{ | ||
| position: 'relative', | ||
| paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding | ||
| height: 0, | ||
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/0RTCxjg1LBR3W0TeErYK?embed&show_copy_link=true" | ||
| title="" | ||
| style={{ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| colorScheme: 'light' | ||
| }} | ||
| frameborder="0" | ||
| loading="lazy" | ||
| webkitAllowFullScreen | ||
| mozAllowFullScreen | ||
| allowFullScreen | ||
| allow="clipboard-write"> | ||
| </iframe> | ||
| </div> | ||
|
|
||
| ### Changing badge position | ||
|
|
||
| By default, the badge is displayed on the top right side of its child widget. You can change its position and bring it to the left side. | ||
|
|
||
| To change the badge position: | ||
|
|
||
| 1. Select the **Badge** widget from the widget or the canvas area. | ||
| 5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. | ||
| 8. Find the **Position (Start or End)** property and click on the icons to change the position. | ||
|
|
||
| <div style={{ | ||
| position: 'relative', | ||
| paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding | ||
| height: 0, | ||
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/oBTo3m1sHq4rYDWEnLW1?embed&show_copy_link=true" | ||
| title="" | ||
| style={{ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| colorScheme: 'light' | ||
| }} | ||
| frameborder="0" | ||
| loading="lazy" | ||
| webkitAllowFullScreen | ||
| mozAllowFullScreen | ||
| allowFullScreen | ||
| allow="clipboard-write"> | ||
| </iframe> | ||
| </div> | ||
|
|
||
| ### Allow animating badge | ||
|
|
||
| By default, the badge widget animates whenever the value is changed. | ||
|
|
||
| To allow/disallows animating badge: | ||
|
|
||
| 1. Select the **Badge** widget from the widget or the canvas area. | ||
|
There was a problem hiding this comment. Extra empty line after each step |
||
|
|
||
| 5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section. | ||
| 8. Find the **Animate** toggle, and then turn it on or off. | ||
|
|
||
| <div style={{ | ||
| position: 'relative', | ||
| paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding | ||
| height: 0, | ||
| width: '100%' | ||
| }}> | ||
| <iframe | ||
| src="https://demo.arcade.software/qRMyvLeZaqz9SnYBaZcE?embed&show_copy_link=true" | ||
| title="" | ||
| style={{ | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| colorScheme: 'light' | ||
| }} | ||
| frameborder="0" | ||
| loading="lazy" | ||
| webkitAllowFullScreen | ||
| mozAllowFullScreen | ||
| allowFullScreen | ||
| allow="clipboard-write"> | ||
| </iframe> | ||
| </div> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[canvas area] can be linked to existing canvas page.