Flutter – Widget ampliado

El widget expandido en flutter es útil cuando queremos que un widget secundario o widgets secundarios ocupen todo el espacio disponible a lo largo del eje principal (para Fila, el eje principal es horizontal y vertical para Columna ).  El widget expandido se puede tomar como hijo de Row, Column y Flex. Y en caso de que no queramos dar espacios iguales a nuestros widgets secundarios, podemos distribuir el espacio disponible como queramos usando el factor flexible . El widget expandido es similar al widget flexible en flutter, con su propiedad de ajuste establecida en FlexFit.tight de forma predeterminada . El widget expandido es básicamente una abreviatura de Flexibleartilugio. Pero si planea crear aplicaciones receptivas o aplicaciones web, definitivamente debe cambiar a Flexible para obtener opciones más adecuadas .

Constructor de clase Expandida:

const Expanded(
{Key? key,
int flex: 1,
required Widget child}
)

Propiedades del widget ampliado:

• child : esta propiedad establece que el árbol de widgets se coloque dentro del widget Expandido . El widget expandido se puede tomar como hijo de Row, Column y Flex.
• debugTypicalAncestorWidgetClass : esta propiedad toma Type como parámetro para establecer ParentData para los mensajes de error.
• fit : esta propiedad controla cómo el widget secundario llena el espacio disponible. Hay dos opciones que da flutter, la primera es FlexFit . apretado que establece que el niño llene el espacio disponible y el segundo es FlexFit.loose que permite que el widget del niño sea tan grande como el espacio disponible.
• flex : si decidimos distribuir el espacio disponible de manera desigual entre los widgets secundarios, entonces usamos el factor flex para hacer lo mismo.

Ejemplo 1: en este ejemplo, el widget expandido se usa dentro de una columna, y debajo está la aplicación en la que no se usa el widget expandido , para mostrar la diferencia en la interfaz de usuario.

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('Geeksforgeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          )),
      body: Center(
          child: Column(
        children: <Widget>[
          Container(
            child: Center(
              child: Text(
                'First widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.blue,
            height: 100,
            width: 200,
          ),
          Expanded(
            child: Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              width: 200,
            ),
          ),
          Container(
            child: Center(
              child: Text(
                'Third widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.orange,
            height: 100,
            width: 200,
          ),
        ],
      )),
    ),
    debugShowCheckedModeBanner: false,
  ));
}

Producción:

Explicación : en esta aplicación, primero hemos creado una barra de aplicaciones simple usando el widget AppBar con un IconButton de menú principal. El color de fondo de la barra de la aplicación se establece en greenAccent [ 400 ] y el título es un widget de texto que contiene ‘ Geeksforgeeks ‘ como texto. El widget principal en el cuerpo de la aplicación es Center y sus tres widgets secundarios son Container . Cada uno de los Contenedores tiene Texto como su hijo especificando sus nombres. Al primer y tercer contenedor se les ha asignado una altura de 200 y un ancho de 100 con el color de fondo azul y rosa respectivamente. El segundoContainer es un widget secundario de Expanded, lo que le da la capacidad de ocupar todo el espacio disponible entre el primer y el segundo widget de Container . Similar al primer y tercer contenedor , este también tiene un ancho de 100. El color de fondo para esto es verde azulado. Y una cosa a tener en cuenta es que no hemos especificado la altura para este contenedor , ya que ocupará todo el espacio disponible, e incluso si le especificamos una altura , el widget Expandido lo sobrescribirá .

Producción:

A continuación se muestra el fragmento de código del segundo contenedor .

...
   Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              width: 200,
              height: 100,
            ),
...

Así es como se verá la interfaz de usuario si no usamos el widget Expandido para el segundo Contenedor en la Columna . Tenga en cuenta que necesitamos especificar la altura en este caso.

Ejemplo 2: en este ejemplo, el widget Expandido se usa como elemento secundario de Row . Y al lado está la aplicación sin el widget Expandido , para mostrar la diferencia en la interfaz de usuario.

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('Geeksforgeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          )),
      body: Center(
          child: Row(
        children: <Widget>[
          Container(
            child: Center(
              child: Text(
                'First widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.blue,
            height: 200,
            width: 100,
          ),
          Expanded(
            child: Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              height: 200,
            ),
          ),
          Container(
            child: Center(
              child: Text(
                'Third widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.pink,
            height: 200,
            width: 100,
          ),
        ],
      )),
    ),
    debugShowCheckedModeBanner: false,
  ));
}

Producción:

Explicación: Esta aplicación también es similar a la aplicación del primer ejemplo, excepto por la parte del widget principal en el cuerpo de la aplicación que es Fila en lugar de Columna , y cada Contenedor tiene una altura de 100. El ancho asignado al primer y tercer Contenedor es 200. El segundo Contenedor de esta aplicación es un elemento secundario del widget Expandido , lo que le da la capacidad de ocupar todo el espacio entre el primer y el tercer Contenedor . Nuevamente, no hemos establecido ningún ancho para el segundo contenedor, ya que no contará.

Producción:

Este es el fragmento de código del segundo contenedor.

...
   Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              width: 100,
              height: 200,
            ),
...

Así es como sucede la interfaz de usuario si eliminamos el widget Expandido de ser el padre del segundo Contenedor . Aquí también hemos especificado explícitamente el ancho del segundo Contenedor .