What is Builder Class In Flutter ??

· 4 min read
What is Builder Class In Flutter
What is Builder Class In Flutter

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.

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 GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply