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

Create A New Custom Component

Components can be created from scratch or from an existing widget in your project.

Create A New Component From Scratch

    Click Select Page Or Component from the Navigation Menu (left side of your screen).
    Select the Components tab and then click on + Create New button at the bottom.
    Input a name for your component and click + Add Component.
    Click UI Builder from the Navigation Menu.
    Select the Components tab.
Your component will now be shown under the Custom Components section of the Widget Panel.​

Create A New Component From An Existing Widget In Your Project

    Click Select Page Or Component from the Navigation Menu (left side of your screen).
    Select a page from where you would like to create a custom component from the existing widget.
    Click Widget Tree from the Navigation Menu (left side of your screen).
    Select the widget you want to create a component from. This can be an individual widget or a parent widget plus its children.
    From the Properties Panel, select Create Custom Component From Widget Icon
    Input a name for your component and select + Add Component.
    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.​

Customize A Custom Component

Once you created a custom component, you are free to customize it.
Apps can have a number of buttons and most of them 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:
    First, create a Custom Component for a Button using the instructions here.
    Add the Button widget either by dragging it from the Base Elements tab or add it directly from the widget tree.
    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.
    Find the Fill Color option below. Click on the Primary text, Enter the color code, hit Enter. You can also choose the color by clicking on blue colored square shape (Beside Primary text) and then click Use Selected Color.
    Set the Border Color (Right side of Fill Color) as well.
    Enter the Border Radius (Below Fill Color) value to 50 and Border Width (Below Border Color) to 3.
    Scroll down a bit and set Text to 'Save'. (Under the Button Text section)
    Adjust the canvas size by dragging either any side or corner of the canvas.
Customization options are available based on the widget.

Add A Custom Component To Your Your Project

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

Delete A Custom Component

    Click Select Page Or Component from the Navigation Menu (left side of your screen).
    Select Components.
    Select the component you want to delete. An orange checkmark will appear to identify the component you have selected (
    ).
    Select the 3 dots (
    ) next to the component you want to delete.
    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, make sure you are not using it anywhere.

Duplicate A Custom Component

    Click Select Page Or Component from the Navigation Menu (left side of your screen).
    Select Components.
    Select the component you want to duplicate. An orange checkmark will appear to identify the page you have selected (
    ).
    Select the 3 dots (
    ) next to the component you want to delete.
    Select Duplicate Page. A popup will appear, select Yes.
    You can rename this Component by selecting the Pencil icon from the Properties Panel.
Last modified 14d ago