Builder in Flutter

This design pattern is one of the most used in mobile development, specially in Android. This pattern helps us to create complex objects in a simple, legible and scalable way. Also, it encapsulates the entire construction processes of that object.

The AlertDialog in Android is a clear example of a Builder. AlertDialog uses this pattern due to it being a graphic component that has a lot of parameters, such as title, content and besides some are optional.

AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("AlertDialogExample");
        builder.setMessage("Do you want to close this  application?");
        builder.setPositiveButton("PROCEED", null);       
builder.setNegativeButton("CANCEL", null);     
        AlertDialog dialog = builder.create();
        dialog.show();

AlertDialog Example

Builder receives as the main parameter the context. SetTitle, setMessage, setPositiveButton, setNegativeButton, is the way in which the parameters are given to that Class. At the time of calling show(), Builder creates the entire instance and also displays the dialog with the context that we gave it previously.

Benefits

• When we have very large objects, with many parameters in the constructor, with Builder we avoid them. Also, if we only need optional parameters, Builder helps us with this.
• Isolates the construction and representation code. Builder increases modularity by encapsulating how complex objects are built and represented. Clients do not need to know anything about the Classes that define the internal structure.
• Provides finer control over the build process. Unlike other creation patterns that build the objects all at once, The Builder pattern builds the object one step at a time, under the control of the user. You only get the product of the constructor once the constructor is finished. This gives finer control over the build process and therefore over the internal structure of the resulting product.

When to use it?

The Builder pattern should be used when:

• The process to create a complex object must be independent of the parts that the object is composed of and how they are assembled.
• The construction process allows different representations of the object that it is being built.

Builder in Flutter

To make the example very visual, let’s create a Widget UsefulWidget(). For this we first create a builder class called UsefulWidgetBuilder(). This is a mutable version of our widget that can be updated step by step and from which we can build a final widget. It would be as follows:

And our widget:

In this way, with the UsefulWidgetbuilder we can build our widget in parts. UsefulWidget has only one constructor that accepts an instance of the UsefulWidgetBuilder. With this we achieve that the widget can be built with only one property at a time or with any combination of arguments. Any property that is not set will be null by default.

So that we can see it more clearly, we are going to create a screen that shows 3 different UsefulWidget:

final builder1 = UsefulWidgetBuilder()..label = 'Builder 1';
 
final builder2 = UsefulWidgetBuilder()
     ..label = 'Builder 2'
     ..content = 'This is a Builder 2'
     ..borderColor = Colors.blue;
 
final builder3 = UsefulWidgetBuilder()
     ..label = 'Builder 3'
     ..color = Colors.blue
     ..textColor = Colors.white;

As we can see, the 3 widgets have different combinations of properties. The result is as follows:

Important: I don’t know if this is the best option to build a widget (it might be better to use named constructors) but I’m trying to make the example easy to see and understand.

Finally what you were waiting for, here you can find the complete example:

GitHub - alvaroarmijos/Design-Patterns

More Design Patterns in Flutter:

• Singleton
• Factory
• Adapter
• Proxy
• Facade
• Observer

If you like it, you can Buy Me A Coffee!