Flutter – Widget de LayoutBuilder

En Flutter, el widget LayoutBuilder es similar al widget Builder, excepto que el marco llama a la función del constructor en el momento del diseño y proporciona las restricciones del widget principal . Esto es útil cuando el padre restringe el tamaño del niño y no depende del tamaño intrínseco del niño. El tamaño final de LayoutBuilder coincidirá con el tamaño de su hijo.

La función constructora se llama en las siguientes situaciones:

• La primera vez que se presenta el widget.
• Cuando el widget principal pasa diferentes restricciones de diseño.
• Cuando el widget principal actualiza este widget.
• Cuando cambian las dependencias a las que se suscribe la función del constructor.

Sintaxis:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return Widget();
  }
)

Haga clic para obtener información sobre BoxConstraints .

Ejemplo 1 : uso de las restricciones del padre para calcular las restricciones del hijo. Caso de uso más común de LayoutBuilder Widget.

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Container(
          color: Colors.red,
  
          /// Giving dimensions to parent Container
          /// using MediaQuery
          /// [container's height] = [(phone's height) / 2]
          /// [container's width] = [phone's width]
          height: MediaQuery.of(context).size.height * 0.5,
          width: MediaQuery.of(context).size.width,
  
          /// Aligning contents of this Container
          /// to center
          alignment: Alignment.center,
  
          child: LayoutBuilder(
            builder: (BuildContext ctx, BoxConstraints constraints) {
              return Container(
                color: Colors.green,
  
                /// Aligning contents of this Container
                /// to center
                alignment: Alignment.center,
  
                /// Using parent's constraints
                /// to calculate child's height and width
                height: constraints.maxHeight * 0.5,
                width: constraints.maxWidth * 0.5,
                child: Text(
                  'LayoutBuilder Widget',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Salida :

Ejemplo 2: también podemos usar el widget LayoutBuilder para mostrar diferentes interfaces de usuario para diferentes tamaños de pantalla.

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Container(
  
          /// Giving dimensions to parent Container
          /// using MediaQuery
          /// [container's height] = [(phone's height) / 2]
          /// [container's width] = [phone's width]
          height: MediaQuery.of(context).size.height * 0.5,
          width: MediaQuery.of(context).size.width,
  
          /// Aligning contents of this Container
          /// to center
          alignment: Alignment.center,
  
          child: LayoutBuilder(
            builder: (BuildContext ctx, BoxConstraints constraints) {
                
              // if the screen width >= 480 i.e Wide Screen
              if (constraints.maxWidth >= 480) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      alignment: Alignment.center,
                      height: constraints.maxHeight * 0.5,
                      color: Colors.red,
                      child: Text(
                        'Left Part of Wide Screen',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      alignment: Alignment.center,
                      height: constraints.maxHeight * 0.5,
                      color: Colors.green,
                      child: Text(
                        'Right Part of Wide Screen',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                );
  
              // If screen size is < 480
              } else {
                return Container(
                  alignment: Alignment.center,
                  height: constraints.maxHeight * 0.5,
                  color: Colors.green,
                  child: Text(
                    'Normal Screen',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

Salida :