¿Cómo agregar espacio entre widgets en Flutter?

En este artículo, aprenderemos cómo agregar espacio entre los widgets. Hay muchas opciones disponibles en flutter que puede usar para proporcionar espacio y hacer que la interfaz de usuario sea atractiva. Si usa Fila y Columna para organizar widgets, entonces, de forma predeterminada, hay opciones limitadas disponibles para la alineación. Hay muchas opciones disponibles para el espaciado de widgets como Padding, Spacer, Fractionly, SizedBox , Expanded, Flexible, etc. Aquí, aprenderemos sobre SizedBox , ya que es más fácil de implementar, proporciona más flexibilidad en la alineación y también es Más fácil de entender. 

Un SizedBox es básicamente un cuadro vacío, si no se proporcionan restricciones. De forma predeterminada, puede llegar a ser tan grande como lo permita su widget principal, pero puede configurar su alto y ancho según sus necesidades.

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

A continuación se muestra la descripción de las restricciones mencionadas anteriormente de la siguiente manera: 

1. Clave clave: Este argumento es de tipo clave. Una clave es básicamente un identificador para widgets. Se puede proporcionar una clave única a los widgets para identificarlos.
2. double width : este argumento es de tipo double. Puede proporcionar el valor doble como ancho que se aplicará al niño.
3. double height : este argumento también es de tipo double. La altura que se va a aplicar a un niño, se pasa aquí como un valor doble.
4. Widget secundario : el widget que está debajo de este widget en el árbol se pasa aquí como un elemento secundario y las restricciones mencionadas anteriormente se le aplican automáticamente.

No es obligatorio proporcionar un widget secundario a SizedBox . Por ejemplo, si tiene dos widgets de tarjeta y desea dejar espacio entre ellos, puede usar SizedBox . Puede agregar SizedBox entre esas tarjetas y pasar los valores de alto y ancho requeridos.

Nota : si no proporciona un widget secundario a SizedBox y la altura y el ancho también son nulos, entonces SizedBox intentará ser tan grande como lo permita su widget principal. Por otro lado, si se proporciona el widget secundario pero la altura y el ancho son nulos, entonces SizedBox intentará hacer coincidir el tamaño de su hijo.

Ejemplo: Con SizedBox

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            children: const [
              SizedBox(
                height: 20,
              ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'GeeksforGeeks',
                    style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
              SizedBox(
                //Use of SizedBox
                height: 30,
              ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'GeeksforGeeks',
                    style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción :

Aquí, en el ejemplo anterior, hemos hecho dos tarjetas. De forma predeterminada, no podemos agregar un espacio personalizado entre ellos. Por lo tanto, para agregar la cantidad de espacio necesaria, hemos utilizado SizedBox con altura personalizada, que es necesaria. 

Ejemplo: Sin SizedBox 

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            children: const [
              // SizedBox(
              //   height: 20,
              // ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
 
              // SizedBox(
              //   height: 30,
              // ),
 
              Card(
                elevation: 10,
                child: Padding(
                  padding: EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style:  TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción:

En el resultado anterior, podemos ver que hay muy poco espacio entre las dos tarjetas. Este pequeño espacio entre ellos también se debe a la elevación proporcionada a las tarjetas. Puede alinearlos usando varias opciones de alineación proporcionadas por la columna, pero eso no sería conveniente en este escenario en particular. Entonces, en tales escenarios cuando requerimos espaciado y tamaño personalizados, usamos SizedBox .