Dart - Builder Class

In Flutter, each widget has an associated build method responsible for rendering the UI. The Flutter framework automatically provides a BuildContext parameter to the build method.

Widget build ( BuildContext context )

Flutter takes care that there need not be any Widget apart from the build that needs the context parameter in their constructors or functions. So we have to pass the context parameter through the build Widget only otherwise, there would be more than one call to the build function.

This is where the Builder class comes into the picture. The main function of the Builder class is to build the child and return it. The Builder class passes a context to the child, It acts as a custom build function.

Builder Class Constructor

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

Note: The builder argument must not be null.

The different methods available in the class are :

• build(BuildContext context) → Widget
• createElement() → StatelessElement
• debugDescribeChildren() → List<DiagnosticsNode>
• debugFillProperties(DiagnosticPropertiesBuilder properties) → void
• noSuchMethod(Invocation invocation) → dynamic
• toString({DiagnosticLevel minLevel: DiagnosticLevel.info}) → String

We will be using the following example to understand the function of the Builder class. We have actually made a very simple app to demonstrate this. The main screen of the app has a simple Scaffold with an AppBar and the body with a simple button which is made with a GestureDetector. The aim of the button is to display a SnackBar when the person clicks on the button.

The main.dart file is as follows.

main.dart:

import 'package:flutter/material.dart';

void main() {
  // Entry point of the Flutter app
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget {
  
  // This widget serves as the
  // root of the application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Builder Demo',
      
      // Hides the debug banner
      debugShowCheckedModeBanner: false, 
      
      // Sets the primary theme color
      theme: ThemeData(
        primarySwatch: Colors.green, 
      ),
      
      // Sets the home screen of the app
      home: Home(), 
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
      // AppBar with title and styling
      appBar: AppBar(
        title: Text('GeeksforGeeks'), 
        backgroundColor: Colors.green, 
        foregroundColor: Colors.white, 
      ),

      // Body with a centered button
      // inside a GestureDetector
      body: Center(
        child: GestureDetector(
          onTap: () {
            
            // Displays a SnackBar when tapped
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('GeeksforGeeks'),
              ),
            );
          },

          // Styling for the clickable box
          child: Container(
            margin: EdgeInsets.all(18), 
            height: 40, 
            decoration: BoxDecoration(
              color: Colors.blueGrey, 
              borderRadius: BorderRadius.circular(8), 
            ),
            
            child: Center(
              child: Text(
                'CLICK ME',
                style: TextStyle(
                  fontWeight: FontWeight.bold, 
                  color: Colors.white, 
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Error Faced:

If we run the above program, we get the following error

lib/main.dart:37:33: Error: Too few positional arguments: 1 required, 0 given.  
            ScaffoldMessenger.of().showSnackBar(
                                ^
/E:/flutter/packages/flutter/lib/src/material/scaffold.dart:158:33: Context:    
Found this candidate, but the arguments don't match.
  static ScaffoldMessengerState of(BuildContext context) {
                                ^^

The error occurs because we are building the Scaffold at the same time we are calling the SnackBar widget (i.e, the same context is being passed to the Scaffold and the SnackBar). The context that is being passed does not belong to a Scaffold, and for a SnackBar to appear, there needs to be a Scaffold. So the app gives the error.

Correction of the Issue

To correct this error we can wrap the Gesture detector with a Builder widget as following. In this case, the context is being passed to the SnackBar widget through the Builder. The SnackBar becomes the child of the Scaffold context being passed.  Now if click on the button It gives the desired output as the Scaffold is already present for the SnackBar to appear.

 body: Center(
        child: GestureDetector(
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('GeeksforGeeks'),
              ),
            );
          },

          // box styling
          child: Container(
            margin: EdgeInsets.all(18),
            height: 40,
            decoration: BoxDecoration(
              color: Colors.blueGrey,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Center(
              child: Text(
                'CLICK ME',
                style:
                    TextStyle(fontWeight: FontWeight.bold,
                            color: Colors.white),
              ),
            ),
          ),
        ),
      ),

Now the program works and shows the following output when we tap on the button.