flutterflow-mcp 0.1.0

package/docs/ff-yaml/04-widgets/text-field.md

@@ -0,0 +1,326 @@
+# TextField
+
+## Minimal Example
+
+```yaml
+key: TextField_xxxxxxxx
+type: TextField
+props:
+  padding: {}
+  textField:
+    textStyle:
+      themeStyle: BODY_MEDIUM
+    inputDecoration:
+      inputBorderType: outline
+      hintText:
+        textValue:
+          inputValue: Enter text
+    keyboardType: TEXT
+    width:
+      pixelsValue:
+        inputValue: Infinity
+```
+
+## Full Schema
+
+```yaml
+key: TextField_xxxxxxxx
+type: TextField
+props:
+  padding: {}                            # Outer padding (common prop)
+  textField:
+    textStyle:                           # Style for user-entered text
+      themeStyle: BODY_MEDIUM            # Base theme text style
+      colorValue:                        # Text color
+        inputValue:
+          themeColor: PRIMARY_TEXT
+    inputDecoration:                     # Input field decoration
+      inputBorderType: outline           # Border type: outline | underline | none
+      borderRadius:                      # Corner radius for outline border
+        type: FF_BORDER_RADIUS_ALL
+        allValue:
+          inputValue: 8
+      contentPadding:                    # Padding inside the text field
+        leftValue:
+          inputValue: 16
+        topValue:
+          inputValue: 16
+        rightValue:
+          inputValue: 16
+        bottomValue:
+          inputValue: 16
+      hintStyle:                         # Style for hint text
+        themeStyle: BODY_MEDIUM
+        colorValue:
+          inputValue:
+            themeColor: SECONDARY_TEXT
+      hintText:                          # Placeholder text
+        translationIdentifier:
+          key: unr512uv                  # i18n key
+        textValue:
+          inputValue: Email              # Hint text content
+      borderColorValue:                  # Border color
+        inputValue:
+          themeColor: ALTERNATE
+      filledValue:                       # Whether field has fill color
+        inputValue: true
+      fillColorValue:                    # Fill background color
+        inputValue:
+          themeColor: SECONDARY_BACKGROUND
+    passwordField: true                  # Obscure text (password mode)
+    keyboardType: EMAIL_ADDRESS          # Keyboard type (see enum below)
+    width:                               # Field width
+      pixelsValue:
+        inputValue: Infinity             # Infinity = fill parent
+    maxLinesValue:                       # Max lines (1 = single line)
+      inputValue: 1
+    maxLengthEnforcement: NOT_ENFORCED   # Character limit enforcement
+    autofocusValue:                      # Auto-focus on mount
+      inputValue: false
+    enableInteractiveSelection:          # Allow text selection
+      inputValue: true
+    trailingIconValue:                   # Icon at right side of field
+      inputValue:
+        sizeValue:
+          inputValue: 22
+        colorValue:
+          inputValue:
+            themeColor: SECONDARY_TEXT
+        iconDataValue:
+          inputValue:
+            codePoint: 59070
+            family: MaterialIcons
+            matchTextDirection: false
+            name: visibility_off
+name: EmailTextField                     # Optional human-readable name
+```
+
+## Field Reference
+
+| Field | Type | Required | Notes |
+|-------|------|----------|-------|
+| `textStyle.themeStyle` | enum | Yes | Theme text style for input text |
+| `textStyle.colorValue.inputValue` | object | No | Input text color |
+| `inputDecoration.inputBorderType` | enum | No | `outline`, `underline`, or `none` |
+| `inputDecoration.borderRadius` | object | No | Corner radius (outline only) |
+| `inputDecoration.contentPadding` | object | No | Inner padding (left/top/right/bottom) |
+| `inputDecoration.hintStyle` | object | No | Hint text style |
+| `inputDecoration.hintText.textValue.inputValue` | string | No | Placeholder text |
+| `inputDecoration.hintText.translationIdentifier.key` | string | No | i18n key for hint |
+| `inputDecoration.borderColorValue.inputValue` | object | No | Border color |
+| `inputDecoration.filledValue.inputValue` | bool | No | Enable fill background |
+| `inputDecoration.fillColorValue.inputValue` | object | No | Fill color |
+| `passwordField` | bool | No | Enable password obscuring |
+| `keyboardType` | enum | Yes | Keyboard layout type |
+| `width.pixelsValue.inputValue` | number | No | Width (`Infinity` = fill parent) |
+| `maxLinesValue.inputValue` | number | No | Max visible lines (1 = single-line) |
+| `maxLengthEnforcement` | enum | No | `NOT_ENFORCED` or `ENFORCED` |
+| `autofocusValue.inputValue` | bool | No | Auto-focus on mount |
+| `enableInteractiveSelection.inputValue` | bool | No | Allow text selection |
+| `trailingIconValue.inputValue` | object | No | Icon on the right side |
+
+> **Warning:** `fontWeightValue` and `fontSizeValue` (on `textStyle`) do **not** support `mostRecentInputValue`. Only use `inputValue` for these fields.
+
+## keyboardType Enum
+
+| Value | Description |
+|-------|-------------|
+| `TEXT` | Default text keyboard |
+| `EMAIL_ADDRESS` | Email keyboard with @ symbol |
+| `NUMBER` | Numeric keyboard |
+| `PHONE` | Phone number keyboard |
+| `MULTILINE` | Multiline text input |
+| `URL` | URL keyboard |
+| `VISIBLE_PASSWORD` | Password without obscuring |
+| `NAME` | Name input keyboard |
+| `STREET_ADDRESS` | Street address keyboard |
+
+## Real Examples
+
+**Email field with full decoration:**
+```yaml
+key: TextField_mxlvp4hj
+type: TextField
+props:
+  padding: {}
+  textField:
+    textStyle:
+      themeStyle: BODY_MEDIUM
+      colorValue:
+        inputValue:
+          themeColor: PRIMARY_TEXT
+    inputDecoration:
+      inputBorderType: outline
+      borderRadius:
+        type: FF_BORDER_RADIUS_ALL
+        allValue:
+          inputValue: 8
+      contentPadding:
+        leftValue:
+          inputValue: 16
+        topValue:
+          inputValue: 16
+        rightValue:
+          inputValue: 16
+        bottomValue:
+          inputValue: 16
+      hintStyle:
+        themeStyle: BODY_MEDIUM
+        colorValue:
+          inputValue:
+            themeColor: SECONDARY_TEXT
+      hintText:
+        translationIdentifier:
+          key: unr512uv
+        textValue:
+          inputValue: Email
+      borderColorValue:
+        inputValue:
+          themeColor: ALTERNATE
+      filledValue:
+        inputValue: true
+      fillColorValue:
+        inputValue:
+          themeColor: SECONDARY_BACKGROUND
+    keyboardType: EMAIL_ADDRESS
+    width:
+      pixelsValue:
+        inputValue: Infinity
+    maxLinesValue:
+      inputValue: 1
+    autofocusValue:
+      inputValue: false
+    trailingIconValue:
+      inputValue:
+        sizeValue:
+          inputValue: 22
+        colorValue:
+          inputValue:
+            themeColor: SECONDARY_TEXT
+name: EmailTextField
+```
+
+**Password field with visibility toggle icon:**
+```yaml
+key: TextField_3pu6ien6
+type: TextField
+props:
+  padding: {}
+  textField:
+    textStyle:
+      themeStyle: BODY_MEDIUM
+    inputDecoration:
+      inputBorderType: outline
+      borderRadius:
+        type: FF_BORDER_RADIUS_ALL
+        allValue:
+          inputValue: 8
+      contentPadding:
+        leftValue:
+          inputValue: 16
+        topValue:
+          inputValue: 16
+        rightValue:
+          inputValue: 16
+        bottomValue:
+          inputValue: 16
+      hintStyle:
+        themeStyle: BODY_MEDIUM
+        colorValue:
+          inputValue:
+            themeColor: SECONDARY_TEXT
+      hintText:
+        translationIdentifier:
+          key: 7nurlg8g
+        textValue:
+          inputValue: Password
+      borderColorValue:
+        inputValue:
+          themeColor: ALTERNATE
+      filledValue:
+        inputValue: true
+      fillColorValue:
+        inputValue:
+          themeColor: SECONDARY_BACKGROUND
+    passwordField: true
+    keyboardType: TEXT
+    width:
+      pixelsValue:
+        inputValue: Infinity
+    maxLengthEnforcement: NOT_ENFORCED
+    maxLinesValue:
+      inputValue: 1
+    autofocusValue:
+      inputValue: false
+    trailingIconValue:
+      inputValue:
+        iconDataValue:
+          inputValue:
+            codePoint: 59070
+            family: MaterialIcons
+            matchTextDirection: false
+            name: visibility_off
+    enableInteractiveSelection:
+      inputValue: true
+name: PasswordTextField
+```
+
+**Multiline text field (3 lines):**
+```yaml
+key: TextField_m3tc50mw
+type: TextField
+props:
+  padding: {}
+  textField:
+    textStyle:
+      themeStyle: BODY_MEDIUM
+    inputDecoration:
+      inputBorderType: outline
+      borderRadius:
+        type: FF_BORDER_RADIUS_ALL
+        allValue:
+          inputValue: 12
+      contentPadding:
+        leftValue:
+          inputValue: 16
+        topValue:
+          inputValue: 16
+        rightValue:
+          inputValue: 16
+        bottomValue:
+          inputValue: 16
+      hintStyle:
+        themeStyle: BODY_MEDIUM
+        colorValue:
+          inputValue:
+            themeColor: SECONDARY_TEXT
+      hintText:
+        translationIdentifier:
+          key: o05uez5s
+        textValue:
+          inputValue: Add your meals for the day
+      borderColorValue:
+        inputValue:
+          themeColor: ALTERNATE
+      filledValue:
+        inputValue: true
+      fillColorValue:
+        inputValue:
+          themeColor: SECONDARY_BACKGROUND
+    keyboardType: TEXT
+    width:
+      pixelsValue:
+        inputValue: Infinity
+    maxLinesValue:
+      inputValue: 3
+    autofocusValue:
+      inputValue: false
+    trailingIconValue:
+      inputValue:
+        sizeValue:
+          inputValue: 22
+        colorValue:
+          inputValue:
+            themeColor: SECONDARY_TEXT
+name: AddFoodTextField
+```

package/docs/ff-yaml/04-widgets/text.md

@@ -0,0 +1,302 @@
+# Text and RichTextSpan
+
+## Text
+
+### Minimal Example
+
+```yaml
+key: Text_xxxxxxxx
+type: Text
+props:
+  text:
+    themeStyle: BODY_MEDIUM
+    selectable: false
+    textValue:
+      inputValue: Hello World
+  padding: {}
+```
+
+### Full Schema
+
+```yaml
+key: Text_xxxxxxxx
+type: Text
+props:
+  text:
+    themeStyle: HEADLINE_MEDIUM          # Theme text style preset (see enum below)
+    translationIdentifier:               # i18n key for this text
+      key: pudajyoa                      # Auto-generated translation key
+    selectable: false                    # Whether user can select/copy text
+    textValue:                           # The actual text content
+      inputValue: Create an Account      # Literal string
+      # OR variable binding:
+      # variable:
+      #   source: WIDGET_CLASS_PARAMETER
+      #   baseVariable:
+      #     widgetClass:
+      #       paramIdentifier:
+      #         name: title
+      #         key: abc123
+      #   nodeKeyRef:
+      #     key: Scaffold_xxxxxxxx
+    fontSizeValue:                       # Override font size from theme
+      inputValue: 28
+    colorValue:                          # Text color
+      inputValue:
+        themeColor: PRIMARY_TEXT          # Theme color reference
+        # OR ARGB integer:
+        # value: "4284982146"
+    fontWeightValue:                     # Font weight override
+      inputValue: w600                   # See weight enum below
+    textAlignValue:                      # Text alignment
+      inputValue: ALIGN_CENTER           # See alignment enum below
+  padding:                               # Common padding prop
+    type: FF_PADDING_ONLY
+    leftValue:
+      inputValue: 4
+  expanded:                              # Optional expand behavior
+    expandedType: EXPANDED               # EXPANDED | FLEXIBLE | UNEXPANDED
+  responsiveVisibility: {}               # Optional breakpoint visibility
+  opacity:                               # Optional opacity
+    opacityValue:
+      inputValue: 1
+    animatedOpacity: {}
+  visibility:                            # Optional conditional visibility
+    visibleValue:
+      variable:
+        source: CONSTANTS
+        baseVariable:
+          constants:
+            value: "FALSE"
+      mostRecentInputValue: true
+parameterValues: {}                      # Optional parameter pass-through
+valueKey: {}                             # Optional key for state preservation
+name: OptionalName                       # Optional human-readable name
+```
+
+### Field Reference
+
+| Field | Type | Required | Notes |
+|-------|------|----------|-------|
+| `themeStyle` | enum | Yes | Base text style from theme |
+| `translationIdentifier.key` | string | No | Auto-generated i18n key |
+| `selectable` | bool | No | Defaults to `false` |
+| `textValue.inputValue` | string | Yes | The display text (literal or variable) |
+| `fontSizeValue.inputValue` | number | No | Override font size in px |
+| `colorValue.inputValue` | object | No | `themeColor` or ARGB `value` |
+| `fontWeightValue.inputValue` | enum | No | Font weight override |
+| `textAlignValue.inputValue` | enum | No | Text alignment |
+
+### themeStyle Enum
+
+| Value | Description |
+|-------|-------------|
+| `DISPLAY_LARGE` | Display Large |
+| `DISPLAY_MEDIUM` | Display Medium |
+| `DISPLAY_SMALL` | Display Small |
+| `HEADLINE_LARGE` | Headline Large |
+| `HEADLINE_MEDIUM` | Headline Medium |
+| `HEADLINE_SMALL` | Headline Small |
+| `TITLE_LARGE` | Title Large |
+| `TITLE_MEDIUM` | Title Medium |
+| `TITLE_SMALL` | Title Small |
+| `LABEL_LARGE` | Label Large |
+| `LABEL_MEDIUM` | Label Medium |
+| `LABEL_SMALL` | Label Small |
+| `BODY_LARGE` | Body Large |
+| `BODY_MEDIUM` | Body Medium |
+| `BODY_SMALL` | Body Small |
+
+### fontWeight Values
+
+`w100`, `w200`, `w300`, `w400` (normal), `w500`, `w600` (semi-bold), `w700` (bold), `w800`, `w900`.
+
+> **Warning:** `fontWeightValue` and `fontSizeValue` do **not** support `mostRecentInputValue`. Only use `inputValue` for these fields. Adding `mostRecentInputValue` will cause a validation error.
+
+### textAlign Values
+
+`ALIGN_START`, `ALIGN_CENTER`, `ALIGN_END`, `ALIGN_JUSTIFY`.
+
+---
+
+## RichTextSpan
+
+RichTextSpan widgets are children of a RichText parent. Each span represents a styled segment of text.
+
+### Minimal Example
+
+```yaml
+key: RichTextSpan_xxxxxxxx
+type: RichTextSpan
+props:
+  richTextSpan:
+    textSpan:
+      textValue:
+        inputValue: ", "
+```
+
+### Full Schema
+
+```yaml
+key: RichTextSpan_xxxxxxxx
+type: RichTextSpan
+props:
+  richTextSpan:
+    textSpan:
+      fontFamily: Open Sans              # Custom font family name
+      themeStyle: BODY_MEDIUM            # Base theme text style
+      legacyOverflowReplacement: ellipsis # Overflow behavior
+      isCustomFont: false                # Whether fontFamily is custom
+      translationIdentifier:
+        key: cwt83xwk                    # i18n translation key
+      selectable: false                  # Text selection enabled
+      textValue:                         # Text content (literal or variable)
+        inputValue: Hello World
+        # OR variable:
+        #   source: WIDGET_CLASS_PARAMETER
+        #   defaultValue:
+        #     serializedValue: City
+        #   baseVariable:
+        #     widgetClass:
+        #       paramIdentifier:
+        #         name: city
+        #         key: k0wwda
+        #   nodeKeyRef:
+        #     key: Scaffold_xxxxxxxx
+        #   uiBuilderValue:
+        #     serializedValue: City
+      fontSizeValue:
+        inputValue: 14                   # Font size override
+      colorValue:
+        inputValue:
+          value: "4287269514"            # ARGB color integer
+      legacyOverriddenTextMaxCharsValue:
+        inputValue: 30                   # Max characters before truncation
+      fontWeightValue:
+        inputValue: w600                 # Font weight
+      textAlignValue:
+        inputValue: ALIGN_START          # Alignment
+```
+
+### Field Reference
+
+| Field | Type | Required | Notes |
+|-------|------|----------|-------|
+| `textSpan.textValue.inputValue` | string | Yes | The span text content |
+| `textSpan.themeStyle` | enum | No | Same values as Text themeStyle |
+| `textSpan.fontFamily` | string | No | Named font family |
+| `textSpan.isCustomFont` | bool | No | Whether font is custom-loaded |
+| `textSpan.fontSizeValue.inputValue` | number | No | Font size override |
+| `textSpan.colorValue.inputValue` | object | No | Color (themeColor or ARGB value) |
+| `textSpan.fontWeightValue.inputValue` | enum | No | Font weight |
+| `textSpan.textAlignValue.inputValue` | enum | No | Text alignment |
+| `textSpan.selectable` | bool | No | Text selection enabled |
+| `textSpan.legacyOverflowReplacement` | string | No | `ellipsis` for overflow handling |
+| `textSpan.legacyOverriddenTextMaxCharsValue.inputValue` | number | No | Max chars before truncation |
+| `textSpan.translationIdentifier.key` | string | No | i18n key |
+
+### Real Examples
+
+**Simple text with theme style and custom size:**
+```yaml
+key: Text_twhdzcyx
+type: Text
+props:
+  text:
+    themeStyle: HEADLINE_MEDIUM
+    translationIdentifier:
+      key: pudajyoa
+    selectable: false
+    textValue:
+      inputValue: Create an Account
+    fontSizeValue:
+      inputValue: 28
+    colorValue:
+      inputValue:
+        themeColor: PRIMARY_TEXT
+    fontWeightValue:
+      inputValue: w600
+  padding: {}
+```
+
+**Text with ARGB color and custom weight:**
+```yaml
+key: Text_mc60e4wt
+type: Text
+props:
+  text:
+    themeStyle: BODY_MEDIUM
+    translationIdentifier:
+      key: n4ydgwcb
+    selectable: false
+    textValue:
+      inputValue: Login
+    colorValue:
+      inputValue:
+        value: "4284982146"
+    fontWeightValue:
+      inputValue: w600
+```
+
+**Expanded text with theme color:**
+```yaml
+key: Text_xg8qrg64
+type: Text
+props:
+  text:
+    themeStyle: BODY_MEDIUM
+    translationIdentifier:
+      key: u0i7hkg9
+    selectable: false
+    textValue:
+      inputValue: "I have read and understand the Privacy Policy, and agree to Terms of Service"
+    colorValue:
+      inputValue:
+        themeColor: PRIMARY_TEXT
+  expanded:
+    expandedType: EXPANDED
+```
+
+**RichTextSpan with variable binding:**
+```yaml
+key: RichTextSpan_je5zvzcq
+type: RichTextSpan
+props:
+  richTextSpan:
+    textSpan:
+      fontFamily: Open Sans
+      themeStyle: BODY_MEDIUM
+      legacyOverflowReplacement: ellipsis
+      isCustomFont: false
+      translationIdentifier:
+        key: cwt83xwk
+      selectable: false
+      textValue:
+        variable:
+          source: WIDGET_CLASS_PARAMETER
+          defaultValue:
+            serializedValue: City
+          baseVariable:
+            widgetClass:
+              paramIdentifier:
+                name: city
+                key: k0wwda
+          nodeKeyRef:
+            key: Scaffold_q2hw5kk7
+          uiBuilderValue:
+            serializedValue: City
+      fontSizeValue:
+        inputValue: 14
+        mostRecentInputValue: 14
+      colorValue:
+        inputValue:
+          value: "4287269514"
+        mostRecentInputValue:
+          value: "4287269514"
+      legacyOverriddenTextMaxCharsValue:
+        inputValue: 30
+      fontWeightValue:
+        inputValue: w600
+      textAlignValue:
+        inputValue: ALIGN_START
+```