alain.bagmi/skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
skills/flutterflow-designer/widget-catalog.md

18 KiB
Raw Permalink Blame History

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