Skip to content

Commit 9a66260

Browse files
PoojaB26PoojaB26
committed
Add custom widgets & functions
1 parent f618e8e commit 9a66260

File tree

5 files changed

+292
-4
lines changed

5 files changed

+292
-4
lines changed

‎docs/ff-concepts/adding-customization/custom-actions.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Custom Actions
3-
sidebar_position: 2
3+
sidebar_position: 3
44
---
55

66
# Custom Actions
@@ -115,8 +115,11 @@ Flow.
115115
<p></p>
116116

117117
:::tip[LOOKING for other CUSTOM action properties?]
118-
To learn more about Custom Action settings, such as the Exclude From Compilation toggle, Include
119-
Build Context toggle, and other properties like Callback Actions, please check out this
118+
To learn more about Custom Action settings, such as the
119+
[**Exclude From Compilation toggle**](custom-code.md#exclude-from-compilation),
120+
[**Include Build Context toggle**](custom-code.md#include-buildcontext),
121+
and other properties like [**Callback Actions**](custom-code.md#add-a-callback-action),
122+
[**Pub Dependencies**](custom-code.md#adding-a-pub-dependency), please check out this
120123
[**comprehensive guide**](custom-code.md).
121124
:::
122125

‎docs/ff-concepts/adding-customization/custom-files.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Custom Files
3-
sidebar_position: 4
3+
sidebar_position: 5
44
---
55
# Custom Files
66

‎docs/ff-concepts/adding-customization/custom-functions.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Custom Functions
3+
sidebar_position: 2
4+
---
5+
6+
# Custom Functions
7+
Custom Functions in FlutterFlow allow you to perform simple Dart calculations and logic. These functions are ideal for tasks that require immediate results, such as data transformations, mathematical calculations, or simple logic operations. **Custom Functions** enable you to encapsulate reusable logic, making your code more organized and maintainable.
8+
9+
## Key Use Cases
10+
11+
- **Data Transformation:** Convert or manipulate data before displaying it in the UI.
12+
- **Mathematical Calculations:** Perform complex calculations directly within your app.
13+
- **String Manipulation:** Format or parse strings based on specific requirements.
14+
- **Conditional Logic:** Implement logic that determines output based on given inputs.
15+
16+
17+
18+
## Test Functions
19+
20+
Custom Functions are typically straightforward input-output expressions designed to perform specific tasks. It is highly recommended to test your Custom Functions before integrating them into your project. Testing the Custom Function code ensures that it works as expected with various inputs, helping you catch potential issues early. Overall, it boosts your confidence in shipping your app to production, knowing that your logic is reliable and robust.
21+
22+
<div style={{
23+
position: 'relative',
24+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
25+
height: 0,
26+
width: '100%'
27+
}}>
28+
<iframe
29+
src="https://demo.arcade.software/BnrHbpxrV7WaNtmn1HLB?embed&show_copy_link=true"
30+
title=""
31+
style={{
32+
position: 'absolute',
33+
top: 0,
34+
left: 0,
35+
width: '100%',
36+
height: '100%',
37+
colorScheme: 'light'
38+
}}
39+
frameborder="0"
40+
loading="lazy"
41+
webkitAllowFullScreen
42+
mozAllowFullScreen
43+
allowFullScreen
44+
allow="clipboard-write">
45+
</iframe>
46+
</div>
47+
48+
:::tip[LOOKING for other CUSTOM Function properties?]
49+
To learn more about Custom Function properties such as
50+
[**Input Arguments**](custom-code.md#input-arguments) and
51+
**[Return Values](custom-code.md#return-values)**, please
52+
check out this
53+
[**comprehensive guide**](custom-code.md).
54+
:::
55+
56+
57+
## FAQs
58+
59+
<details>
60+
<summary>I can't add imports!</summary>
61+
62+
You can't have imports in a custom function. To be able to add imports, consider using a Custom Action.
63+
64+
</details>
65+
66+
67+
<details>
68+
<summary>Getting error: The function 'FFAppState' isn't defined.</summary>
69+
70+
You can't use the app state variable (i.e., FFAppState().variablename) directly in your custom
71+
function code. Instead, you can pass the app state variable as a parameter and then use it in your code.
72+
73+
</details>
74+
75+
76+
## Some common examples
77+
78+
<details>
79+
<summary>Calculating Discounts:</summary>
80+
81+
```
82+
double calculateDiscount(double price, double discountRate) {
83+
return price - (price * discountRate / 100);
84+
}
85+
```
86+
87+
</details>
88+
89+
90+
<details>
91+
<summary>String Capitalization:</summary>
92+
93+
```
94+
String capitalize(String input) {
95+
return input.isNotEmpty ? '${input[0].toUpperCase()}${input.substring(1)}' : '';
96+
}
97+
```
98+
</details>
99+
100+
<details>
101+
<summary>Temperature Conversion:</summary>
102+
103+
```
104+
double celsiusToFahrenheit(double celsius) {
105+
return (celsius * 9/5) + 32;
106+
}
107+
108+
```
109+
</details>
110+

‎docs/ff-concepts/adding-customization/custom-widgets.md

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
title: Custom Widgets
3+
sidebar_position: 4
4+
---
5+
6+
# Custom Widgets
7+
8+
Custom Widgets allow you to create unique and reusable UI components that extend beyond the
9+
standard widget offerings in FlutterFlow. By leveraging Custom Widgets, you can achieve a higher
10+
level of
11+
customization and control over your app's user interface.
12+
13+
In most cases, you can create a reusable component with the basic widget set available in
14+
FlutterFlow. However, when you want to include a UI package from [**pub.dev**](https://pub.dev),
15+
**Custom Widgets** are the better choice.
16+
17+
## Key Use Cases
18+
19+
- **Unique UI Elements:** Create complex UI components that are not available in the default
20+
FlutterFlow widget set.
21+
22+
- **Third-Party Integrations:** Integrate external UI packages from pub.dev to enhance the
23+
functionality and appearance of your app.
24+
25+
## Creating a New Custom Widget
26+
27+
To create a new custom widget, add a new Custom Code snippet and follow the quick guide below. In
28+
this example, we will create a `ProductRatingBar` widget that uses a pub.dev dependency to display the rating bar UI. It will also take a callback action to provide the rating value back to the caller.
29+
30+
<div style={{
31+
position: 'relative',
32+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
33+
height: 0,
34+
width: '100%'
35+
}}>
36+
<iframe
37+
src="https://demo.arcade.software/zBBJiIaTBpoBWErwvpbd?embed&show_copy_link=true"
38+
title=""
39+
style={{
40+
position: 'absolute',
41+
top: 0,
42+
left: 0,
43+
width: '100%',
44+
height: '100%',
45+
colorScheme: 'light'
46+
}}
47+
frameborder="0"
48+
loading="lazy"
49+
webkitAllowFullScreen
50+
mozAllowFullScreen
51+
allowFullScreen
52+
allow="clipboard-write">
53+
</iframe>
54+
</div>
55+
56+
### Properties: Width & Height
57+
58+
For custom widgets, it is mandatory to specify both width and height. These properties are required to size the custom widget appropriately. Without setting these dimensions, the custom widget will not render correctly within your application.
59+
60+
## Adding a pub.dev dependency
61+
62+
In this example, we are using the
63+
[**flutter_rating_bar**](https://pub.dev/packages/flutter_rating_bar) dependency to create a
64+
`ProductRatingBar` widget for our
65+
Product pages. See how we utilize the example code from pub.dev and add the customized widget in
66+
FlutterFlow:
67+
68+
<div style={{
69+
position: 'relative',
70+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
71+
height: 0,
72+
width: '100%'
73+
}}>
74+
<iframe
75+
src="https://demo.arcade.software/EAqWwTSfjumXzJ3xB6FX?embed&show_copy_link=true"
76+
title=""
77+
style={{
78+
position: 'absolute',
79+
top: 0,
80+
left: 0,
81+
width: '100%',
82+
height: '100%',
83+
colorScheme: 'light'
84+
}}
85+
frameborder="0"
86+
loading="lazy"
87+
webkitAllowFullScreen
88+
mozAllowFullScreen
89+
allowFullScreen
90+
allow="clipboard-write">
91+
</iframe>
92+
</div>
93+
94+
## Using a Custom Widget
95+
To add a custom widget to your page, you can drag and drop it from the Widget Palette's Components section or through the Widget Tree section. Here is a demo:
96+
97+
<div style={{
98+
position: 'relative',
99+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
100+
height: 0,
101+
width: '100%'
102+
}}>
103+
<iframe
104+
src="https://demo.arcade.software/9xerjlQ5oweTvZwEYFpC?embed&show_copy_link=true"
105+
title=""
106+
style={{
107+
position: 'absolute',
108+
top: 0,
109+
left: 0,
110+
width: '100%',
111+
height: '100%',
112+
colorScheme: 'light'
113+
}}
114+
frameborder="0"
115+
loading="lazy"
116+
webkitAllowFullScreen
117+
mozAllowFullScreen
118+
allowFullScreen
119+
allow="clipboard-write">
120+
</iframe>
121+
</div>
122+
123+
124+
### Providing the Callback Actions
125+
126+
Since we created the `onRating` callback action in our custom widget, we must provide an action
127+
when setting the widget in page. In this example, we set the `ratingValue` to the page state
128+
variable `userRating`.
129+
130+
<div style={{
131+
position: 'relative',
132+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
133+
height: 0,
134+
width: '100%'
135+
}}>
136+
<iframe
137+
src="https://demo.arcade.software/GB1Y3wH0MeIvJcu9EL4S?embed&show_copy_link=true"
138+
title=""
139+
style={{
140+
position: 'absolute',
141+
top: 0,
142+
left: 0,
143+
width: '100%',
144+
height: '100%',
145+
colorScheme: 'light'
146+
}}
147+
frameborder="0"
148+
loading="lazy"
149+
webkitAllowFullScreen
150+
mozAllowFullScreen
151+
allowFullScreen
152+
allow="clipboard-write">
153+
</iframe>
154+
</div>
155+
156+
## Preview Widget
157+
158+
FlutterFlow also allows you to view your custom widget once it is successfully compiled.
159+
160+
![preview-widget.png](imgs%2Fpreview-widget.png)
161+
162+
:::tip[LOOKING for other CUSTOM action properties?]
163+
To learn more about Custom Widget settings, such as the
164+
[**Exclude From Compilation toggle**](custom-code.md#exclude-from-compilation),
165+
and other properties like [**Callback Actions**](custom-code.md#add-a-callback-action),
166+
[**Pub Dependencies**](custom-code.md#adding-a-pub-dependency), please check out this
167+
[**comprehensive guide**](custom-code.md).
168+
:::
169+
170+
171+
172+
173+
174+
175+

‎docs/ff-concepts/adding-customization/imgs/preview-widget.png

87.3 KB
Loading

0 commit comments

Comments
 (0)