What is Builder Class In Flutter?

• Flutter
• Flutter Widget Guide

Builder Class is a platonic widget that calls a closure to obtain its child widget. In today’s article, we will learn what is Builder Class In Flutter.

In Flutter, the Builder class plays a crucial role in widget composition and building dynamic UIs. If you’re a Flutter developer eager to expand your understanding of this powerful class, you’re in the right place!

In this blog post, we’ll explore the ins and outs of the Builder class and its significance within the Flutter framework. You’ll learn how the Builder class enables the creation of widgets that depend on dynamic data, as well as its role in optimizing widget tree updates.

Learn What is Builder Class In Flutter?

It basically converts a function that builds a widget into a widget. It’s a widget where you need to pass a widget but only have a function that returns a widget, you can use the Builder widget.

bool bar;

Widget createFooOrBarWidget() {
  if(bar) {
    return BarWidget();
  } 
  return FooWidget();
}

Widget build(BuildContext context) =>
  Container(child: Builder((context) => createFooOrBarWidget()));

you could also use

Widget build(BuildContext context) =>
  Container(child: createFooOrBarWidget());

Purpose:

In the Flutter framework, every widget has a build method that accepts a BuildContext parameter:

Widget build ( BuildContext context ) { ... }

Hence, if you were trying to pass a specific context object to a child, you won’t be able to. You cannot call build() and pass your own context object manually. I mean, you can, but you would be calling the build function twice:

• Your manual call.
• The automatic call by the framework.

Let’s say that we want to add a new SnackBar widget to its new Scaffold parent widget that is being returned:

@override
 Widget build(BuildContext context) {
   return new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
       ),
       body: new Container(),
       /// Scaffold doesn't exist in this context here
       /// because the context thats passed into 'build'
       /// refers to the Widget 'above' this one in the tree,
       /// and the Scaffold doesn't exist above this exact build method
       ///
       /// This will throw an error:
       /// 'Scaffold.of() called with a context that does not contain a Scaffold.'
       floatingActionButton: new FloatingActionButton(onPressed: () {
         Scaffold.of(context).showSnackBar(
               new SnackBar(
                 content: new Text('SnackBar'),
               ),
             );
       }));
 }

The Scaffold.of(context) function will not find the Scaffold because We use a Builder Class to pass the context of the Scaffold Widget:

@override
 Widget build(BuildContext context) {
   return new Scaffold(
     appBar: new AppBar(
       title: new Text(widget.title),
     ),
     body: new Container(),
     /// Builders let you pass context
     /// from your *current* build method
     /// Directly to children returned in this build method
     ///
     /// The 'builder' property accepts a callback
     /// which can be treated exactly as a 'build' method on any
     /// widget
     floatingActionButton: new Builder(builder: (BuildContext context) {
       return new FloatingActionButton(onPressed: () {
         Scaffold.of(context).showSnackBar(
               new SnackBar(
                 backgroundColor: Colors.blue,
                 content: new Text('SnackBar'),
               ),
             );
       });
     }),
   );
 }

Remember, the Builder class constructor:

Builder({Key key, @required WidgetBuilder builder })

creates a widget by delegating its build to the callback function passed through its constructor. So, in the code:

new Builder(builder: (BuildContext context){ ... });

we provided a closure that:

• Contains a BuildContext context parameter
• Builds and returns child widget(s) based on that context passed.

Up next we will see topics like types of builder in flutter, flutter widget builder example, builder flutter example, layout builder flutter, listview builder flutter, builder context flutter, custom builder flutter, flutter UI builder

Conclusion:

Thanks for being with us on a flutter journey !!!

So in this article, we have been through what is builder class in flutter.

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.