Flutter – Widget de SizedBox

SizedBox es un widget integrado en flutter SDK. Es una caja simple con un tamaño específico. Se puede usar para establecer restricciones de tamaño para el widget secundario, colocar un SizedBox vacío entre los dos widgets para obtener algo de espacio en el medio, o algo más. Es algo similar a un widget de contenedor con menos propiedades.

Constructor de la clase SizedBox:

 Dibuja un cuadro simple con la altura y el ancho mencionados o un widget secundario dentro. 

const SizedBox(
{Key key,
double width,
double height,
Widget child}
)

Constructor de SizedBox.expand:

 Esta implementación del widget SizedBox le permite ser tan grande como lo permite el widget principal. 

const SizedBox.expand(
{Key key,
Widget child}
)

Constructor de SizedBox.fromSize: 

Esto permite crear un SizedBox con un tamaño específico.

SizedBox.fromSize(
{Key key,
Widget child,
Size size}
)

Constructor de SizedBox.shrink:

 Esta implementación del widget SizedBox permite que sea tan pequeño como lo permite el widget secundario. 

const SizedBox.shrink(
{Key key,
Widget child}
)

Propiedades del widget SizedBox:

• child: esta propiedad toma un widget secundario como el objeto para mostrarlo debajo de SizedBox en el árbol de widgets o dentro de SizedBox en la pantalla.
• altura: esta propiedad especifica la altura de SizedBox en píxeles. Es un valor doble como el objeto.
• ancho: esta propiedad también contiene un valor doble como objeto para dar ancho a SizedBox .

Ejemplo 1:

import 'package:flutter/material.dart';
 
//Importing material design library
void main() {
  runApp(
    //Our app widget tree starts from here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          centerTitle: true,
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        body: Center(
          //SizedBox Widget
          child: SizedBox(
            width: 200.0,
            height: 100.0,
            child: Card(
              color: Colors.green,
              child: Center(
                child: Text(
                  'GeksForGeeks',
                  style: TextStyle(color: Colors.white),
                ), //Text
              ), //Center
            ), //Card
          ), //SizedBox
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: al observar el código, podemos ver que el cuerpo de esta aplicación flutter contiene el widget Center como el principal de todos. Dentro del widget Center , tenemos un SizedBox cuya altura se menciona como 100 y ancho como 200. El widget SizedBox mantiene la tarjeta como elemento secundario y restringe su tamaño.

Uso de SizedBox.expand

 child: SizedBox.expand(
            child: Card(
              color: Colors.green,
              child: Center(
                child: Text(
                  'GeksForGeeks',
                  style: TextStyle(color: Colors.white),
                ), //Text
              ), //Center
            ), //Card
          ), //SizedBox.expand
        ), //Center
      ), //Scaffold

Producción:

Explicación: aquí hemos utilizado SizedBox.expand que le permite expandirse tanto como lo permite su padre. Y el widget del Centro le permite llenar toda la pantalla.

Ejemplo 2:

 body: Center(
          child: Row(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ), //Container
              //SizedBox Widget
              SizedBox(
                width: 50,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ) //Container
            ], //<Widget>[]
          ), //Row
        ), //Center

Producción: 

Explicación: en este ejemplo, hemos utilizado el widget SizedBox para agregar un espacio entre los dos widgets de contenedor . Aquí tenemos dos widgets de contenedor dentro de la fila. Al primer contenedor se le da color rojo y una altura y un ancho de 200 píxeles cada uno. El segundo contenedor azul tiene una altura y un ancho de 100 píxeles cada uno. Y entre estos dos contenedores, tenemos un widget SizedBox con un ancho de 50 píxeles y sin altura.