Skip to main content

Components

Components are reusable widgets you create to meet the specific needs of your app. This approach ensures consistency, saves time, and simplifies maintenance across your project.

Creating a Component from Scratch​

To create a component from scratch, click the Add Button in the Page Selector or Widget Tree tab. Then choose Add Component > Create Blank Component.

Convert to a Component​

If you have already built a complex widget in your page, you can convert that entire widget into a component and reuse it throughout your app.

To convert a complex widget into a reusable component, right-click on the root widget that contains the entire widget tree you want to convert, then select Convert to Component.

Creating Component from Template​

FlutterFlow offers multiple popular templates for components across various use cases that you can apply to your project in seconds, saving time.

Generate with Designer​

You can quickly create a component with FlutterFlow Designer by describing what you want in natural language. Designer uses your description along with your project context, to build the component with relevant widgets.

Import from Figma Frame​

You can quickly turn your Figma designs into functional FlutterFlow components using Import from Figma. Provide a Figma Frame URL, and FlutterFlow AI will analyze the design and generate a UI layout that closely matches your mockup.

To get started, first connect your Figma account. Then, when creating a new component, select Import from Figma from the available options. Paste the Figma Frame URL and click Import.

FlutterFlow will display a preview of the selected frame. Review the preview, then click Generate to create the component. Once completed, the component will appear in the AI Generation History, where you can preview and add it to your project.

warning

Currently, FlutterFlow doesn't support importing SVG elements from Figma frames. However, you can manually add the SVGs directly to your project assets after generation is complete, or replace them in Figma with supported image formats like PNG or JPEG.

Component Properties Panel​

When you select a component from the widget tree, the Properties panel opens on the right side of the interface. Use it to configure and manage the various aspects of your components.

Here’s what you can typically find and modify in this panel:

Component Parameters​

Component parameters are values that a component receives from its parent entity, such as a page or another component. These parameters allow the component to be dynamic and adaptable based on the context in which it is used. By using parameters, you can customize components for different scenarios without altering the base design or functionality.

Creating a Component Parameter​

To create a component parameter, go to the root widget in the component's widget tree.

Bind the Parameter​

Once you have created a component parameter, you can link data from the parent entity to your component.

Here's a small example of how we can bind the parameters created in ProfileListItem to their respective widgets and action triggers.

Aside from standard data types used throughout FlutterFlow, you can also create parameters of the following types:

  • Action (callback): This allows you to pass actions into the component. The component can then invoke the action, usually referred to as a callback, in its own action flows. Callbacks are often used to handle events, like updating a parent's state when a button has been pressed. You can learn more about how to use callbacks here.

  • Widget Builders: Widget builders allows you to pass in widgets to be used within the component's widget tree. This is especially useful when you want to dynamically substitute content for part of a component, such as displaying an item in a custom dropdown, or creating a component for some consistent layout. You can learn more about how to use Widget Builders here.

Actions​

This tab allows you to define and manage interactions or events triggered by user actions. For example, you can configure a button to navigate to another page or execute a callback action from the page using the current component.

Adding an action to a component element is exactly the same experience as adding actions to any page element. Here's a quick overview:

For component actions, you can establish specific behaviors or functions that are triggered by certain events related to the component's lifecycle, such as On Initialization.

info

To learn more about component lifecycle and adding On Initialization action to your component refer here.

State Management​

Components can have their own internal state variables that track information like form inputs, toggles, or other user interactions. Components can update their state in response to user actions (e.g., clicking a button) or external events (e.g., receiving new data from an API).

Effective state management ensures that components dynamically update their UI to reflect changes in state, providing a responsive user experience.

info

Learn how to Create a State variable for your components and how to Update them.