FlutterFlow Docs
Search
⌃K

Custom Components

Custom Components allow you to create a custom widget that can be reused and stylized throughout your app. When you change the custom component, it will be reflected throughout your app - there's no need to edit every widget.
Custom components enforce software development's DRY (Don't repeat yourself) principle. The DRY principle helps you save time by reducing the repetition of work.

Creating Custom Component

You can create a new custom component in the following three ways:
  1. 1.
    ​Component from scratch​
  2. 2.
    ​Component from an existing​
  3. 3.
    ​Component from library​

1. Component from scratch

To create a component from scratch:
  1. 1.
    Click Select Page Or Component from the Navigation Menu (left side of your screen).
  2. 2.
    Select the Components tab and click the + Create New button at the bottom.
  3. 3.
    Input a name for your component and click + Create New (Inside Blank Component).
  4. 4.
    Click UI Builder from the Navigation Menu.
  5. 5.
    Select the Components tab. Your component will now be shown under the Custom Components section of the Widget Panel.​

2. Component from existing widget

To create a component from an existing widget in your project:
  1. 1.
    Click Select Page Or Component from the Navigation Menu (left side of your screen).
  2. 2.
    Select a page from where you would like to create a custom component from the existing widget.
  3. 3.
    Click Widget Tree from the Navigation Menu (left side of your screen).
  4. 4.
    Select the widget you want to create a component from. This can be an individual widget or a parent widget plus its children.
  5. 5.
    From the Properties Panel, select Create Custom Component From Widget Icon (
    ).
  6. 6.
    Input a name for your component and select + Add Component.
  7. 7.
    You can now adjust the padding and alignment of the newly created widget.
Your component will now be shown under the Custom Components section of the Widget Panel.​

3. Component from library

The Component Library allows you to choose from 50+ components, including UI Elements, Bottom Sheets, Cards, and more.
To create a component from the library:
  1. 1.
    Click Select Page Or Component from the Navigation Menu (left side of your screen).
  2. 2.
    Select the Components tab and click the + Create New button at the bottom.
  3. 3.
    Input a name for your component.
  4. 4.
    Choose the component and click on the Use Template button.
  5. 5.
    Click UI Builder from the Navigation Menu.
  6. 6.
    Select the Components tab. Your component will now be shown under the Custom Components section of the Widget Panel.​

Passing data

You can pass data from a page to your custom component.
Here are the steps you must follow to pass data to the component:
  1. 1.
    ​Define parameter​
  2. 2.
    ​Pass data​
  3. 3.
    ​Use parameter data​

1. Define parameter

  1. 1.
    Open your custom component. If you are on the widget tree, select the first widget (i.e., ComponentName).
  2. 2.
    On the right side, find the Component Parameters section and click on the + button.
  3. 3.
    Click on + Add Parameter and enter the parameter name (e.g., imageUploadAction).
  4. 4.
    Set the Type to the appropriate one.
  5. 5.
    Click Confirm.
Define parameter-1
Define parameter-2

2. Pass data

To pass data to a component:
  1. 1.
    Select the custom component on the page (where you have added it).
  2. 2.
    Move to the properties panel; under the Component Properties section, you'll find the parameter name (defined on the custom component; see the previous step) will be displayed.
  3. 3.
    Enter the parameter value. If the parameter is of type Action, click Open. This will open an Action flow Editor in a new popup window, and here you can add any action, such as Upload Action.
Passing data-1
Passing data-2
4. (Optional) If the parameter is of type String, you can pass the translations for the different languages (added while setting up the translation). To add translations, enable Allow Translations toggle, click on the globe icon, and add the translated text.
Passing translated string data

3. Use parameter data

To use the parameter data:
  1. 1.
    Navigate to your custom component and select the widget property for which you want to use the parameter data.
  2. 2.
    Click Set from Variable and select the Source as the parameter name.
Use parameter data

Customize Custom Component

Once you create a custom component, you are free to customize it.
Apps can have several buttons, most of which might look the same. So let's try an example of customizing a Custom Component for a Button.
Here's an example of how you can customize a custom component:
  1. 1.
    First, create a Custom Component for a Button using the instructions here.
  2. 2.
    Add the Button widget either by dragging it from the Base Elements tab or directly from the widget tree.
  3. 3.
    Move to the Property Editor and scroll down to the Width and Height under the Button Style. Set width to 200 and height to 50.
  4. 4.
    Find the Fill Color option below. Click on the Primary text, Enter the color code, and hit Enter. You can also choose the color by clicking on the blue colored square shape (besides the Primary text) and then clicking Use Selected Color.
  5. 5.
    Set the Border Color (Right side of the Fill Color).
  6. 6.
    Enter the Border Radius (Below Fill Color) value to 50 and Border Width (Below Border Color) to 3.
  7. 7.
    Scroll down and set the Text to 'Save' (Under the Button Text section).
  8. 8.
    Adjust the canvas size by dragging any side or corner of the canvas.
Customization options are available based on the widget.

Adding Custom Component

  1. 1.
    Click Select Page Or Component from the Navigation Menu (left side of your screen).
  2. 2.
    Select a page on which you would like to add Custom Component.
  3. 3.
    Navigate to the Widget Panel and select Components.
  4. 4.
    Under Custom Components, identify the component you want to use and drag it onto the canvas.

Trigger Actions on Page

Sometimes, you might need to trigger actions on a page from a widget inside of a component. For example, uploading an image with a tap of a button (inside the component) and displaying the uploaded picture back to a widget on a page.
You can do so by adding the Execute Callback action. Please find the detailed instructions on the following page.

Accessing widget state of a component's widgets

A Component might have several widgets inside of it, and you might want to access their state outside of the component, i.e., page. For example, a component with two TextFields (one for username and another for password) can be used on the sign-in and sign-up page. Now on both pages, you must retrieve the value of each TextField, as if they were added on the page itself.
You can access the widget state of a component's widgets on your page, just as you would for other widgets. Simply navigate to the Set Variable menu > Widget State > [component_name] > [your_widget].
Accessing widget state of a component's widgets

Delete Custom Component

  1. 1.
    Click Select Page Or Component from the Navigation Menu (left side of your screen).
  2. 2.
    Select Components.
  3. 3.
    Select the component you want to delete. An orange checkmark will appear to identify the component you have selected (
    ).
  4. 4.
    Select the Three dots (
    ) next to the component you want to delete.
  5. 5.
    Select Delete Page. A popup will appear; select Yes.
You won't be able to delete a Component if it is being used in the app. To successfully delete a Component, ensure you are not using it anywhere.

Duplicate Custom Component

  1. 1.
    Click Select Page Or Component from the Navigation Menu (left side of your screen).
  2. 2.
    Select Components.
  3. 3.
    Select the component you want to duplicate. An orange checkmark will appear to identify the page you have selected (
    ).
  4. 4.
    Select the three dots (
    ) next to the component you want to delete.
  5. 5.
    Select Duplicate Page. A popup will appear; select Yes.
  6. 6.
    You can rename this Component by selecting the Pencil icon from the Properties Panel.
Previous
Custom Actions
Next
Bottom Sheet
Last modified 1mo ago