Dardo – Clase de constructor

Cada vez que creamos un nuevo widget en un aleteo, siempre hay un Widget de compilación asociado con él y el marco pasa el parámetro BuildContext .

Widget build ( BuildContext context )

Flutter se encarga de que no sea necesario que haya ningún Widget aparte de la compilación que necesite el parámetro de contexto en sus constructores o funciones. Por lo tanto, tenemos que pasar el parámetro de contexto a través del widget de compilación solo, de lo contrario, habría más de una llamada a la función de compilación.

Aquí es donde la clase Builder entra en escena. La función principal de la clase Builder es construir el niño y devolverlo. La clase Builder pasa un contexto al elemento secundario. Actúa como una función de compilación personalizada.

Constructor de clase constructor

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

El argumento del constructor no debe ser nulo.

Los diferentes métodos disponibles de la clase son:

• construir (contexto BuildContext) → Widget
• createElement() → StatelessElement
• debugDescribeChildren() → List<DiagnosticsNode>
• debugFillProperties(propiedades de DiagnosticPropertiesBuilder) → vacío
• noSuchMethod(Invocación invocación) → dinámico
• toString({DiagnosticLevel minLevel: DiagnosticLevel.info}) → String

Usaremos el siguiente ejemplo para comprender la función de la clase Builder. De hecho, hemos creado una aplicación muy simple para demostrar esto. La pantalla principal de la aplicación tiene un Scaffold simple con una AppBar y el cuerpo con un botón simple que se hace con un GestureDetector. El objetivo del botón es mostrar un SnackBar cuando la persona hace clic en el botón.

El archivo main.dart es el siguiente

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Builder Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Home(),
    );
  }
}
  
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        
      // appbar
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
      ),
        
      // detect gesture
      body: Center(
        child: GestureDetector(
          onTap: () {
            Scaffold.of(context).showSnackBar(
              new SnackBar(
                content: new 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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Si ejecutamos el programa anterior, obtenemos el siguiente error:

======== Exception caught by gesture ===============================================================
Scaffold.of() called with a context that does not contain a Scaffold.
====================================================================================================

El error ocurre porque estamos construyendo Scaffold al mismo tiempo que llamamos al widget SnackBar ( es decir, se pasa el mismo contexto a Scaffold ya SnackBar ). El contexto que se está pasando no pertenece a un Scaffold y para que aparezca SnackBar es necesario que haya un Scaffold. Entonces la aplicación da el error.

Para corregir este error, podemos envolver el detector de gestos con un widget Builder de la siguiente manera. En este caso, el contexto se pasa al widget SnackBar a través del Generador. El SnackBar se convierte en el hijo del contexto Scaffold que se pasa. Ahora, si hace clic en el botón, da la salida deseada ya que Scaffold ya está presente para que aparezca SnackBar.

body: Center(
        child: Builder(builder: (BuildContext context) {
          return GestureDetector(
            onTap: () {
              Scaffold.of(context).showSnackBar(
                new SnackBar(
                  content: new Text('GeeksforGeeks'),
                ),
              );
            },
            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),
                ),
              ),
            ),
          );
        }),
      ),

Ahora el programa funciona y muestra el siguiente resultado cuando tocamos el botón