Skip to main content

Custom Widgets

Custom Widgets allow you to create unique and reusable UI components that extend beyond the standard widget offerings in FlutterFlow. By leveraging Custom Widgets, you can achieve a higher level of customization and control over your app's user interface.

In most cases, you can create a reusable component with the basic widget set available in FlutterFlow. However, when you want to include a UI package from pub.dev, Custom Widgets are the better choice.

Key Use Cases​

  • Unique UI Elements: Create complex UI components that are not available in the default FlutterFlow widget set.

  • Third-Party Integrations: Integrate external UI packages from pub.dev to enhance the functionality and appearance of your app.

Creating a New Custom Widget​

To create a new custom widget, add a new Custom Code snippet and follow the quick guide below. In this example, we will create a ProductRatingBar widget that uses a pub.dev dependency to display the rating bar UI. It will also take a callback action to provide the rating value back to the caller.

Widget Builder as Parameter

You can also leverage Widget Builders that allow you to pass in widgets to be used within the custom widget tree. This is especially useful when you want to dynamically substitute content for some part of a custom widget - like displaying an item in a custom widget popup.

Properties: Width & Height​

For custom widgets, it is mandatory to specify both width and height. These properties are required to size the custom widget appropriately. Without setting these dimensions, the custom widget will not render correctly within your application.

Add Dependency to Custom Widgets​

In this example, we are using the flutter_rating_bar dependency to create a ProductRatingBar widget for our Product pages. See how we utilize the example code from pub.dev and add the customized widget in FlutterFlow:

Choosing a Pubspec Dependency

For a comprehensive guide on navigating external packages using pub.dev, evaluating packages, and making the best choices for your app, follow the guide.

Using a Custom Widget​

To add a custom widget to your page, you can drag and drop it from the Widget Palette's Components section or through the Widget Tree section. Here is a demo:

Providing the Callback Actions​

Since we created the onRating callback action in our custom widget, we must provide an action when setting the widget in page. In this example, we set the ratingValue to the page state variable userRating.

Preview Widget​

FlutterFlow also allows you to view your custom widget once it is successfully compiled.

preview-widget.png

LOOKING for other CUSTOM action properties?

To learn more about Custom Widget settings, such as the Exclude From Compilation toggle, and other properties like Callback Actions, Pub Dependencies, please check out this comprehensive guide.