Generate Dynamic Children

Widgets capable of handling multiple child widgets have an additional functionality called Generate Dynamic Children that helps you generate multiple child widgets from a List variable.

This is particularly useful when you are retrieving data from an API call, Firebase Query, or a State variable that holds a List of items.

Some of the widgets that can handle multiple children include Column, Row, Stack, ListView, GridView, and PageView.

In the following example, we will use an AppState called categoryList that holds a List of Product Categories and set the variable to the categoryList widget that is a ListView.

note

In the demo app, we have predefined custom DataTypes. One such DataType is "Category," which includes the fields categoryImg and categoryName. In our App State, categoryList is a List<Category> that holds multiple Category objects. We use this list variable as the value source for our ListView widget.

The value is stored in a variable (in this example, allCategoriesList) and can be used to populate any scrollable view. In our example, we populate the ListView widget, which creates multiple instances, each holding a Column with a circular Container and Text.

What are Instances?

Learn about Instances and how it compares with Classes in this document.

To make changes, you need to modify only the first child and set the variable sources to the first child widgets. These changes will be applied to all children widgets in the ListView. The number of children will match the length of the List variable unless you have set a limit in the Max Items option under the Generating Dynamic Children tab.

Let's see a quick demo to set the variable source of the first child widgets: