Delegate Widget Design

Using the widely used builder pattern in Flutter can help you build complex UI more cleanly.

When is that useful?

Imagine you are creating a list of items, like a list of radio buttons or checkboxes in a ListView. You don't want the main widget to handle the design details of each item inside the list. That gets messy.

How Delegation Works

Instead of the main widget building every single child item directly, you can use a concept called delegation. You provide a separate function or object, often called a "builder", that takes care of creating the design for each item.

The Builder Pattern

The image shows an example using a typedef for the builder function:

typedef OptionBuilder = Widget Function(String key, bool selected);

This OptionBuilder is a function that knows how to build a single item widget based on a key (maybe the text) and whether it's selected or not.

Using the Builder

The main widget (like RadioQuestion in the example) receives this OptionBuilder as a parameter:

final OptionBuilder optionBuilder;

Then, when it needs to display an item, it just calls this optionBuilder function, passing the necessary data for that specific item:

widget.optionBuilder(widget.keys[index], _selectedIndex == index)

This way, the main widget focuses on managing the list structure and data (keys, _selectedIndex), while the builder function focuses solely on how each individual item looks. This makes your code easier to read, maintain, and reuse.

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

Frequently Asked Questions

What is delegate widget design in Flutter?

It's a way to separate the responsibility of building a complex widget's child parts. Instead of the main widget building everything, it gives this job (delegates it) to another function or object, often called a builder.

When should I use this pattern?

It's very useful when you have lists of similar items. Example a `ListView` of radio buttons or checkboxes. You want to keep the main widget clean and focused on the list structure, while the builder handles the design of each item.

Does this make my code better?

Yes, it generally leads to cleaner code that is easier to understand, test, and reuse. You can swap out different builders to change the look of the list items without changing the main list logic.

Delegate widget design