Custom Widgets

While developing your app, you may want to use a widget that is not a standard FlutterFlow widget. This could be a widget from pub.dev or a special widget that you built yourself.
Using our Custom Widget editor, you can write/modify the widget code or upload it directly in the UI editor. FlutterFlow also allows you to define parameters that can be used to update the custom widget. You can compile and preview the custom widget right in the UI builder.
Make sure your pub.dev widget has WEB support. This is required to use the widget in Run/Test mode within FlutterFlow.
​
Parameter Data Types
The following data types are available while defining the parameters for Custom Widgets.
Color: To pass the Color value from the UI editor or Hex Color such as #4caf50.
Icon: To pass the Icon.
Integer: To pass numbers such as 100, 4302, 50000, etc.
Double: To pass a decimal number such as 12.43, 3233.50, 65.5666, etc.
String: To pass a plain text such as title, description, etc.
Image Path: To pass the URL of the uploaded image.
Video Path: To pass the URL of the uploaded video.
Audio Path: To pass the URL of the uploaded audio.
Boolean: To pass either a true or false value.
Record Reference: To pass a reference of a document.
Record: To pass the actual record i.e a Firestore document.
Timestamp: To pass date and time value.
JSON: To pass the JSON value such as {"firstName":"John", "lastName":"Doe"}.
TimestampRange: To pass the start date-time and end date-time values.
Lat Lng: To pass the latitude and longitude of a particular place.
GooglePlace: To pass the GooglePlace data.
Creating A Custom Widget
To create a custom widget:
Click on the Custom Function (
) from the Navigation Menu (left side of your screen).
Select the Custom Widgets tab.
Click on the + Create button. This is will open a new popup window.
Give the widget a name inside the Widget Name input box.
Under the Define Parameters, see width and height parameters are automatically added. This is required so that you can configure the dimensions of your custom widget.
Click on the + Add Parameter to pass the data to your custom widget. For example, if your custom widget has something to do with the image, you should pass the URL of the image.
Inside the Parameter 2 section, enter the Parameter Name.
Select the suitable Data Type. You can find more about the Data Type in Custom Widget here.
If your Custom Widget needs a list of data such as a list of numbers to display it on a chart, set the Is List to True otherwise, keep it as False.
Now, click on the </> View Boilerplate Code to see the generated code with all parameters.
Click on the </> Copy to Editor to start modifying from the generated code. 
Click on + Add Dependency to import any package from pub.dev.
Inside the Required Pubspec Dependencies enter the package name with its latest version. It should be something like packagename: ^version. If you are not sure how to get a package name and its version, follow the instructions here.
Inside the Editor on the right, add the import statement for a package. 
To get the import statement of a package, follow the instructions here.
Add the code snippet of your custom widget.
Replace the hard-coded values of the custom widget with the widget.parametername.
Click on Compile & Preview. if everything goes right, you'll see the preview of your custom widget and then you can play with the parameter values.
Click on Save.
Your Custom Widget in preview mode looks like this:
Using A Custom Widget In Your Project
To add Custom Widget to 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 Widget.
Click UI Builder from the Navigation Menu
Select the Components tab.
Under Custom Code Widgets, identify the custom widget you want to use and drag it onto the canvas.
Select Custom Widget from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Custom Widget Properties section.
Set the appropriate values to the parameters.
Customizing Your Custom Widget
You may want to add more parameters to customize the widget to your needs. 
Here's an example of how you can add more parameters to your custom widget:
Click on the Custom Function from the Navigation Menu (left side of your screen).
Select the Custom Widgets tab.
Identify the Custom Widget from the list and click on the edit icon (
).
Click on the + Add Parameter and define the new parameter.
Now, click on the </> View Boilerplate Code. This will open a new popup window.
Copy the code for the new parameter. i.e this.parametername and final datatype parametername.
Click Cancel to exit the popup.
Paste the code for the new parameter.
Replace the hard-coded values of the custom widget with the widget.parametername.
Click on Compile & Preview and test the custom widget with a new parameter added.
Click Save.
Every time when you add a new parameter, make sure you compile the Custom Widget.
Here's how your Custom Widget works with a new parameter:
Accessing Local State Variable
Please find the instructions to use the local state variable in your custom widget here.
Formatting The Code
While modifying the code in the code editor, you may find some code is not properly aligned. To format the code, simply click on the Format Code icon (
) on the top right side of the code editor.
Duplicating A Custom Widget
To duplicate a Custom Widget:
Click on the Custom Function from the Navigation Menu (left side of your screen).
Select the Custom Widgets tab.
Identify the Custom Widget from the list and click on the edit icon (
).
Click Yes.
Deleting A Custom Widget
To delete a Custom Widget:
Click on the Custom Function from the Navigation Menu (left side of your screen).
Select the Custom Widgets tab.
Identify the Custom Widget from the list and click on the edit icon (
).
Click Delete.
You won't be able to delete a Custom Widget if it is being used in the app. To successfully delete a Custom Widget, make sure you are not using it anywhere.
Getting the Dependency
Dependency is a package (library) hosted on pub.dev. While creating the Custom widget, you need the dependency name and its version so that FlutterFlow can download that dependency for your project.
To get the package/dependency name and its latest version:
Open the package/dependency page on pub.dev.
Click on the Copy icon(
) on the right side of the package name.
Paste the copied dependency inside the FlutterFlow.
You'll also need to check if the custom widget contains any additional dependencies. This information is available to the bottom right in the pub.dev package.
A package may contain more than one dependency. Make sure to add all dependencies to your custom widget.
Getting the Package Import Statement
Package Import Statement is usually a path where the code (you are using to create Custom Widget) resides. While creating the Custom Widget, you need the package import statement to be written at the top in the code editor.
To get the package/dependency import statement:
Open the package/dependency page on pub.dev.
Select the installing tab.
Under the Import it section, copy the import statement by clicking on the Copy icon(
).
Paste it inside the Custom Widget code editor.
Additional Resources
​Detailed step-by-step instructions on how to create a QR generating widget
​

Customizing Your App 🖌️ - Previous

Custom Functions

Next - Customizing Your App 🖌️

Custom Components

Last modified 2d ago

Copy link

Outline

Parameter Data Types

Creating A Custom Widget

Using A Custom Widget In Your Project

Customizing Your Custom Widget

Accessing Local State Variable

Formatting The Code

Duplicating A Custom Widget

Deleting A Custom Widget

Getting the Dependency

Getting the Package Import Statement

Additional Resources