704 lines
18 KiB
Markdown
704 lines
18 KiB
Markdown
# FlutterFlow Widget Catalog
|
|
|
|
Complete reference of all FlutterFlow widgets with their properties and MCP automation steps. Use this when building screens to know exactly how to add and configure each widget.
|
|
|
|
## How to Add Any Widget
|
|
|
|
Generic pattern — adapt per widget:
|
|
|
|
```
|
|
1. Ensure a container is selected (Column, Row, Stack, etc.)
|
|
2. Open widget palette:
|
|
find "Widget Palette" or "+" → click
|
|
3. Find category:
|
|
find "[Category Name]" → click to expand
|
|
4. Find widget:
|
|
find "[Widget Name]" → click
|
|
5. Widget added as child of selected container
|
|
6. Properties panel opens automatically
|
|
7. Configure properties (see widget-specific sections below)
|
|
8. Verify:
|
|
read_page → confirm widget in widget tree
|
|
```
|
|
|
|
---
|
|
|
|
## Layout Elements
|
|
|
|
### Column
|
|
|
|
Arranges children vertically.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Main Axis Alignment | Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly | Start |
|
|
| Cross Axis Alignment | Start, Center, End, Stretch | Center |
|
|
| Main Axis Size | Max, Min | Max |
|
|
| Scrollable | true/false | false |
|
|
| Spacing | number (px) | 0 |
|
|
|
|
```
|
|
Adding Column:
|
|
1. find "Layout Elements" → click
|
|
2. find "Column" → click
|
|
3. Properties → find "Main Axis Alignment" → select "Start"
|
|
4. find "Cross Axis Alignment" → select "Center"
|
|
5. find "Spacing" → form_input "16"
|
|
```
|
|
|
|
### Row
|
|
|
|
Arranges children horizontally.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Main Axis Alignment | Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly | Start |
|
|
| Cross Axis Alignment | Start, Center, End, Stretch | Center |
|
|
| Main Axis Size | Max, Min | Max |
|
|
| Scrollable | true/false | false |
|
|
| Spacing | number (px) | 0 |
|
|
|
|
```
|
|
Adding Row:
|
|
1. find "Layout Elements" → click
|
|
2. find "Row" → click
|
|
3. Configure same as Column but for horizontal layout
|
|
```
|
|
|
|
### Stack
|
|
|
|
Overlapping children positioned absolutely or relatively.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Alignment | TopLeft, TopCenter, TopRight, CenterLeft, Center, CenterRight, BottomLeft, BottomCenter, BottomRight | TopLeft |
|
|
| Clip | true/false | true |
|
|
|
|
```
|
|
Adding Stack:
|
|
1. find "Layout Elements" → click
|
|
2. find "Stack" → click
|
|
3. Children are stacked on top of each other
|
|
4. Use Positioned/Align widgets to place children
|
|
```
|
|
|
|
### Container
|
|
|
|
Versatile box widget for decoration, sizing, and padding.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Width | number, %, Expand, Shrink | Shrink |
|
|
| Height | number, %, Expand, Shrink | Shrink |
|
|
| Padding | 4-value (T, R, B, L) | 0 |
|
|
| Margin | 4-value (T, R, B, L) | 0 |
|
|
| Background Color | color | transparent |
|
|
| Border | width, color, style | none |
|
|
| Border Radius | number (all) or 4-value | 0 |
|
|
| Shadow | offsetX, offsetY, blur, spread, color | none |
|
|
| Gradient | type, colors, stops | none |
|
|
|
|
```
|
|
Adding Container:
|
|
1. find "Layout Elements" → click
|
|
2. find "Container" → click
|
|
3. Properties → find "Width" → select "Expand" or enter number
|
|
4. find "Height" → enter number (e.g., "52")
|
|
5. find "Padding" → form_input "16" (uniform) or set individually
|
|
6. Style tab → find "Background Color" → click swatch → enter hex
|
|
7. find "Border Radius" → form_input "14"
|
|
```
|
|
|
|
### ListView
|
|
|
|
Scrollable list of children.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Direction | Vertical, Horizontal | Vertical |
|
|
| Shrink Wrap | true/false | false |
|
|
| Separator | Widget/none | none |
|
|
| Reverse | true/false | false |
|
|
| Padding | 4-value | 0 |
|
|
|
|
```
|
|
Adding ListView:
|
|
1. find "Layout Elements" → click
|
|
2. find "ListView" → click
|
|
3. Properties → find "Direction" → select "Vertical"
|
|
4. find "Shrink Wrap" → toggle if needed
|
|
5. Add child widgets (they become list items)
|
|
```
|
|
|
|
### GridView
|
|
|
|
Grid layout of children.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Cross Axis Count | number | 2 |
|
|
| Main Axis Spacing | number | 10 |
|
|
| Cross Axis Spacing | number | 10 |
|
|
| Child Aspect Ratio | number | 1.0 |
|
|
| Shrink Wrap | true/false | false |
|
|
| Scrollable | true/false | true |
|
|
|
|
```
|
|
Adding GridView:
|
|
1. find "Layout Elements" → click
|
|
2. find "GridView" → click
|
|
3. Properties → find "Cross Axis Count" → form_input "2"
|
|
4. find "Main Axis Spacing" → form_input "16"
|
|
5. find "Cross Axis Spacing" → form_input "16"
|
|
```
|
|
|
|
### PageView
|
|
|
|
Swipeable pages (like onboarding).
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Scroll Direction | Horizontal, Vertical | Horizontal |
|
|
| Page Snapping | true/false | true |
|
|
| Auto Play | true/false | false |
|
|
| Auto Play Duration | ms | 3000 |
|
|
|
|
```
|
|
Adding PageView:
|
|
1. find "Layout Elements" → click
|
|
2. find "PageView" → click
|
|
3. Each child widget = one page
|
|
4. Properties → enable page snapping
|
|
5. Optionally enable auto play with duration
|
|
```
|
|
|
|
### Card
|
|
|
|
Material Design elevated surface.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Elevation | number | 2 |
|
|
| Color | color | surface color |
|
|
| Shape | rounded rectangle | 4px radius |
|
|
| Clip | true/false | true |
|
|
| Margin | 4-value | 0 |
|
|
|
|
```
|
|
Adding Card:
|
|
1. find "Layout Elements" → click
|
|
2. find "Card" → click
|
|
3. Properties → find "Elevation" → form_input "4"
|
|
4. Style → find "Border Radius" → form_input "16"
|
|
5. Add child Column or other layout widget
|
|
```
|
|
|
|
### ListTile
|
|
|
|
Standard list row with leading, title, subtitle, trailing.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Title | text | required |
|
|
| Subtitle | text | optional |
|
|
| Leading | widget | optional |
|
|
| Trailing | widget | optional |
|
|
| Dense | true/false | false |
|
|
| Content Padding | 4-value | default |
|
|
|
|
### Expanded
|
|
|
|
Fills remaining space in Row/Column.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Flex | number | 1 |
|
|
|
|
### Spacer
|
|
|
|
Flexible empty space in Row/Column.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Flex | number | 1 |
|
|
|
|
### Wrap
|
|
|
|
Flow layout that wraps to next line.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Direction | Horizontal, Vertical | Horizontal |
|
|
| Spacing | number | 0 |
|
|
| Run Spacing | number | 0 |
|
|
| Alignment | Start, Center, End | Start |
|
|
|
|
### TabBar + TabBarView
|
|
|
|
Tab-based navigation within a page.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Tab Count | number | 2 |
|
|
| Tab Labels | text list | Tab 1, Tab 2 |
|
|
| Tab Icons | icon list | none |
|
|
| Is Scrollable | true/false | false |
|
|
| Indicator Color | color | primary |
|
|
|
|
---
|
|
|
|
## Base Elements
|
|
|
|
### Text
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Text | string | "Text" |
|
|
| Style | theme style or custom | bodyMedium |
|
|
| Color | color | primary text |
|
|
| Font Family | font name | theme default |
|
|
| Font Size | number (sp) | varies |
|
|
| Font Weight | 100-900 | 400 |
|
|
| Max Lines | number | unlimited |
|
|
| Overflow | Clip, Ellipsis, Fade | Clip |
|
|
| Text Align | Left, Center, Right, Justify | Left |
|
|
|
|
```
|
|
Adding Text:
|
|
1. find "Base Elements" → click
|
|
2. find "Text" → click
|
|
3. Double-click text on canvas to edit inline, OR:
|
|
4. Properties → find "Text" field → form_input "Your text here"
|
|
5. find "Style" → select theme text style (e.g., "headingLarge")
|
|
6. Or manually: find "Font Size" → form_input "24"
|
|
7. find "Font Weight" → select "Bold" or "700"
|
|
8. find "Color" → click swatch → enter hex or select theme color
|
|
```
|
|
|
|
### Button
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Text | string | "Button" |
|
|
| Icon | icon | none |
|
|
| Icon Position | Left, Right | Left |
|
|
| Style | Filled, Outlined, Text | Filled |
|
|
| Color | color | primary |
|
|
| Text Color | color | on primary |
|
|
| Border Radius | number | 8 |
|
|
| Width | number, Expand | Shrink |
|
|
| Height | number | 44 |
|
|
| Disabled | true/false | false |
|
|
|
|
```
|
|
Adding Button:
|
|
1. find "Base Elements" → click
|
|
2. find "Button" → click
|
|
3. Properties → find "Text" → form_input "Continue"
|
|
4. find "Style" → select "Filled"
|
|
5. find "Width" → select "Expand" (full width)
|
|
6. find "Height" → form_input "52"
|
|
7. find "Border Radius" → form_input "14"
|
|
8. Style tab → find "Background Color" → enter "#D4A012" (ZIVVO gold)
|
|
9. find "Text Color" → enter "#1A1815"
|
|
10. Actions tab → find "On Tap" → configure navigation or action
|
|
```
|
|
|
|
### Image
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Source | URL, Asset, Network | required |
|
|
| Width | number | shrink |
|
|
| Height | number | shrink |
|
|
| Fit | Cover, Contain, Fill, FitWidth, FitHeight | Cover |
|
|
| Border Radius | number | 0 |
|
|
| Placeholder | color or widget | none |
|
|
| Cache | true/false | true |
|
|
|
|
```
|
|
Adding Image:
|
|
1. find "Base Elements" → click
|
|
2. find "Image" → click
|
|
3. Properties → find "Image Source" → select type (Asset/Network)
|
|
4. For Asset: find "Select Asset" → click → choose from media library
|
|
5. For Network: find "URL" → form_input "https://..."
|
|
6. find "Width" → form_input "120"
|
|
7. find "Height" → form_input "120"
|
|
8. find "Fit" → select "Cover"
|
|
9. find "Border Radius" → form_input "60" (for circular)
|
|
```
|
|
|
|
### Icon
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Icon | Material icon name | required |
|
|
| Size | number | 24 |
|
|
| Color | color | primary |
|
|
|
|
```
|
|
Adding Icon:
|
|
1. find "Base Elements" → click
|
|
2. find "Icon" → click
|
|
3. Properties → find icon picker → click
|
|
4. Search for icon name (e.g., "directions_car") → click
|
|
5. find "Size" → form_input "32"
|
|
6. find "Color" → select theme color
|
|
```
|
|
|
|
### IconButton
|
|
|
|
Icon with tap handler. Same as Icon but with onTap action.
|
|
|
|
### Divider
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Thickness | number | 1 |
|
|
| Color | color | divider color |
|
|
| Indent | number | 0 |
|
|
| End Indent | number | 0 |
|
|
|
|
### CircleImage
|
|
|
|
Circular avatar image.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Source | URL, Asset | required |
|
|
| Radius | number | 24 |
|
|
| Border | width, color | none |
|
|
|
|
### RichText
|
|
|
|
Multi-styled text spans.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Spans | list of text + style | required |
|
|
|
|
### Badge
|
|
|
|
Notification indicator.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Count | number | 0 |
|
|
| Color | color | error |
|
|
| Show | true/false | true |
|
|
|
|
---
|
|
|
|
## Form Elements
|
|
|
|
### TextField
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Label | string | none |
|
|
| Hint Text | string | none |
|
|
| Initial Value | string | empty |
|
|
| Keyboard Type | Text, Number, Email, Phone, URL, Multiline | Text |
|
|
| Obscure Text | true/false | false |
|
|
| Max Lines | number | 1 |
|
|
| Max Length | number | unlimited |
|
|
| Validation | required, email, min/max length, regex | none |
|
|
| Prefix Icon | icon | none |
|
|
| Suffix Icon | icon | none |
|
|
| Border | Outline, Underline, None | Outline |
|
|
| Fill Color | color | transparent |
|
|
| Border Radius | number | 8 |
|
|
|
|
```
|
|
Adding TextField:
|
|
1. find "Form Elements" → click
|
|
2. find "TextField" → click
|
|
3. Properties → find "Label" → form_input "Phone Number"
|
|
4. find "Hint Text" → form_input "Enter your phone number"
|
|
5. find "Keyboard Type" → select "Phone"
|
|
6. find "Prefix Icon" → select phone icon
|
|
7. find "Max Length" → form_input "9"
|
|
8. Style → find "Border Radius" → form_input "12"
|
|
9. find "Fill Color" → enter background color
|
|
```
|
|
|
|
### DropDown
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Options | list of strings | required |
|
|
| Initial Value | string | none |
|
|
| Hint Text | string | "Select..." |
|
|
| Search | true/false | false |
|
|
| Multi Select | true/false | false |
|
|
| Border Radius | number | 8 |
|
|
|
|
### RadioButton
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Options | list of strings | required |
|
|
| Initial Value | string | none |
|
|
| Direction | Horizontal, Vertical | Vertical |
|
|
|
|
### Checkbox
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Initial Value | true/false | false |
|
|
| Label | string | none |
|
|
| Active Color | color | primary |
|
|
|
|
### CheckboxGroup
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Options | list of strings | required |
|
|
| Initial Values | list of strings | empty |
|
|
| Direction | Horizontal, Vertical | Vertical |
|
|
|
|
### Slider
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Min | number | 0 |
|
|
| Max | number | 100 |
|
|
| Initial Value | number | 50 |
|
|
| Divisions | number | null (continuous) |
|
|
| Active Color | color | primary |
|
|
|
|
### RatingBar
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Initial Rating | number | 0 |
|
|
| Item Count | number | 5 |
|
|
| Item Size | number | 40 |
|
|
| Allow Half | true/false | false |
|
|
| Active Color | color | amber |
|
|
| Inactive Color | color | grey |
|
|
|
|
### PinCode
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Length | number | 6 |
|
|
| Obscure | true/false | false |
|
|
| Auto Focus | true/false | true |
|
|
| Key Type | Number, Text | Number |
|
|
|
|
```
|
|
Adding PinCode (for OTP):
|
|
1. find "Form Elements" → click
|
|
2. find "PinCode" → click
|
|
3. Properties → find "Length" → form_input "6"
|
|
4. find "Obscure" → leave false (show digits)
|
|
5. find "Auto Focus" → toggle on
|
|
6. Style → customize box appearance
|
|
```
|
|
|
|
### ChoiceChips
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Options | list of strings | required |
|
|
| Multi Select | true/false | false |
|
|
| Selected Color | color | primary |
|
|
| Unselected Color | color | surface |
|
|
| Chip Shape | rounded rectangle | 8px radius |
|
|
|
|
### PlacePicker
|
|
|
|
Google Places autocomplete input.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| API Key | string | required |
|
|
| Hint | string | "Search location" |
|
|
| Country Restrict | list of country codes | none |
|
|
|
|
### Form
|
|
|
|
Wraps form fields for validation.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Auto Validate | true/false | false |
|
|
| Column Spacing | number | 16 |
|
|
|
|
### Signature
|
|
|
|
Drawing pad for signatures.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Pen Color | color | black |
|
|
| Pen Width | number | 2 |
|
|
| Background Color | color | white |
|
|
|
|
### CountController
|
|
|
|
Increment/decrement counter.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Min | number | 0 |
|
|
| Max | number | 99 |
|
|
| Step | number | 1 |
|
|
| Initial Value | number | 1 |
|
|
|
|
### CreditCardForm
|
|
|
|
Card payment input fields.
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Card Number | auto | required |
|
|
| Expiry Date | auto | required |
|
|
| CVV | auto | required |
|
|
| Card Holder | auto | optional |
|
|
|
|
---
|
|
|
|
## Page Elements
|
|
|
|
### AppBar
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Title | text or widget | none |
|
|
| Leading | widget (usually back button) | auto |
|
|
| Actions | list of widgets | none |
|
|
| Background Color | color | primary |
|
|
| Elevation | number | 4 |
|
|
| Center Title | true/false | varies by platform |
|
|
|
|
```
|
|
Configuring AppBar:
|
|
1. When page scaffold is selected, find AppBar section
|
|
2. Toggle "Show App Bar" on
|
|
3. find "Title" → form_input "Home" or add Text widget
|
|
4. find "Background Color" → transparent or theme color
|
|
5. find "Elevation" → form_input "0" (flat style)
|
|
6. Add action buttons: find "Actions" → add IconButton widgets
|
|
```
|
|
|
|
### FloatingActionButton (FAB)
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Icon | icon | add |
|
|
| Background Color | color | primary |
|
|
| Foreground Color | color | on primary |
|
|
| Elevation | number | 6 |
|
|
| Mini | true/false | false |
|
|
| Extended | true/false | false |
|
|
| Label | string (if extended) | none |
|
|
|
|
### Drawer (Side Menu)
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Width | number | 304 |
|
|
| Background Color | color | surface |
|
|
| Elevation | number | 16 |
|
|
|
|
### BottomNavigationBar
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Items | list of label + icon | required (2-5) |
|
|
| Current Index | number | 0 |
|
|
| Type | Fixed, Shifting | Fixed |
|
|
| Background Color | color | surface |
|
|
| Selected Color | color | primary |
|
|
| Unselected Color | color | grey |
|
|
|
|
```
|
|
Adding Bottom Nav:
|
|
1. Select page scaffold
|
|
2. find "Nav Bar" or "Bottom Navigation" section
|
|
3. Toggle on
|
|
4. Add items:
|
|
find "Add Item" → click
|
|
form_input label → "Home"
|
|
Select icon → home icon
|
|
Repeat for each tab
|
|
5. Configure colors to match ZIVVO theme
|
|
```
|
|
|
|
---
|
|
|
|
## Composite Widgets
|
|
|
|
### DataTable
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Columns | list of header labels | required |
|
|
| Rows | data source binding | required |
|
|
| Sortable | true/false | false |
|
|
| Selectable | true/false | false |
|
|
|
|
### Calendar
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Mode | Month, Week, Day | Month |
|
|
| First Day of Week | number (1=Mon) | 1 |
|
|
| Events | data source | none |
|
|
|
|
### Chart
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Type | Line, Bar, Pie, Donut | Line |
|
|
| Data | data source | required |
|
|
| Colors | list of colors | theme |
|
|
| Show Legend | true/false | true |
|
|
|
|
### Stepper
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Steps | list of step widgets | required |
|
|
| Type | Horizontal, Vertical | Horizontal |
|
|
| Current Step | number | 0 |
|
|
|
|
---
|
|
|
|
## Conditional and Dynamic Widgets
|
|
|
|
### ConditionalBuilder
|
|
|
|
Shows different widgets based on conditions:
|
|
|
|
```
|
|
1. Wrap target widget in ConditionalBuilder
|
|
2. Set condition (state variable, API result, etc.)
|
|
3. Configure "If True" child
|
|
4. Configure "If False" child (optional)
|
|
```
|
|
|
|
### AnimatedSwitcher
|
|
|
|
Animates between child widgets when they change:
|
|
|
|
| Property | Values | Default |
|
|
|----------|--------|---------|
|
|
| Duration | ms | 300 |
|
|
| Transition | Fade, Scale, Slide | Fade |
|
|
|
|
### BackendQuery Wrapper
|
|
|
|
Wraps a widget to bind it to a data source:
|
|
|
|
```
|
|
1. Select widget → Backend Query tab
|
|
2. Choose query type (Firestore, API, Supabase)
|
|
3. Configure query parameters
|
|
4. Map returned fields to widget properties
|
|
5. Configure loading and error states
|
|
```
|