Flutter: widgets de filas y columnas

Fila y Columna son los dos widgets más importantes y poderosos en Flutter. Estos widgets le permiten alinear a los niños horizontal y verticalmente según el requisito. Como sabemos, cuando diseñamos cualquier interfaz de usuario (interfaz de usuario) en un aleteo, debemos organizar su contenido en forma de fila y columna, por lo que estos widgets de fila y columna son necesarios al diseñar la interfaz de usuario. 

Constructor de la clase de columna:

Column(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children: const <Widget>[]}
)

Constructor de clase de fila:

Row(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textBaseline: TextBaseline.alphabetic,
List<Widget> children: const <Widget>[]}
)

Propiedades de los widgets de fila y columna:

• children: Esta propiedad toma List<Widget>, que es una lista de widgets para mostrar dentro del widget Row o Column .
• clipBehaviour: esta propiedad mantiene la clase Clip como el objeto para decidir si el contenido de la Fila o la Columna debe recortarse o no.
• crossAxisAlignment : crossAxisAlignment toma la enumeración CrossAxisAlignment como el objeto de cómo deben colocarse los widgets de los niños en crossAxisAlignment. Para Fila es vertical y para Columna es horizontal.
• dirección: esta propiedad se mantiene como el objeto de enumeración Axis para decidir la dirección utilizada en el eje principal. Para Fila y Columna , es fijo.
• mainAxisAlignment: esta propiedad toma la enumeración MainAxisAlignment como el objeto para decidir cómo se deben colocar los widgets secundarios en mainAxisAlignment . Para Fila es horizontal y para Columna es vertical.
• mainAxisSize: esta propiedad decide el tamaño del eje principal tomando la enumeración MainAxisSize como el objeto.
• runtimeType: esta propiedad indica el tipo de tiempo de ejecución del widget de fila o columna .
• textBaseline: esta propiedad es responsable de la alineación del texto en el widget de Fila o Columna con respecto a una línea de base.
• textDirection: esta propiedad controla la dirección del texto del widget Fila o Columna , que puede ser de izquierda a derecha (de forma predeterminada) o de derecha a izquierda.
• verticalDirection: esta propiedad toma la enumeración VerticalDirection como el objeto para determinar el orden en el que se deben colocar en capas los elementos secundarios.

Fila:

Crea una array horizontal de niños.

Propiedades de alineación: podemos alinear el contenido según nuestra elección utilizando mainAxisAlignment y crossAxisAlignment . El eje principal de Row es horizontal y el eje transversal al eje principal de Row es vertical. Podemos alinear a los niños horizontalmente usando MainAxisAlignment y verticalmente usando CrossAxisAlignment en esa fila.

Además de mainAxisAlignment y crossAxisAlignment, también tenemos otras propiedades como mainAxisSize,textDirection,verticalDirection, etc., pero nos centraremos en estas dos (mainAxisAlignment y crossAxisAlignment) en este artículo, ya que se usan principalmente y otras en algún otro artículo.

Fila

Podemos alinear el contenido usando las siguientes propiedades:

• inicio : Coloque a los niños desde el inicio de la fila.
• fin : Coloque a los niños al final de la fila.
• centro: Coloque a los niños en el centro de la fila.
• spaceBetween : Coloque el espacio uniformemente entre los niños.
• spaceAround : coloque el espacio uniformemente entre los niños y también la mitad de ese espacio antes y después del primer y último niño.
• spaceEvenly : coloque el espacio uniformemente entre los niños y también antes y después del primer y último niño.

Veremos la diferencia con la ayuda de ejemplos. Supongamos que queremos alinear el contenido de manera que haya espacio alrededor de los elementos secundarios en una fila:

Archivo: main.dart

import 'package:flutter/material.dart';
 
//function to trigger build
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),// ThemeData
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );// MaterialApp
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
      ),// AppBar
      // App body consists of single Row
      // Row consists of three children widgets
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "Geeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "For",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "Geeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Producción:

Columna:

Crea una array vertical de niños.

Propiedades de alineación:

En esto también tenemos mainAxisAlignment y crossAxisAlignment. En columna, los niños están alineados de arriba hacia abajo. El eje principal es vertical y el eje transversal es horizontal. MainAxisAlignment alinea sus elementos secundarios verticalmente y CrossAxisAlignment se alinea horizontalmente en esa Columna.

Columna

Podemos alinear el contenido usando las mismas propiedades que se discutieron anteriormente en Fila (inicio, fin, espacio entre, espacio alrededor, espacio uniforme).

Veremos la diferencia con la ayuda de ejemplos. Supongamos que queremos alinear el contenido para que tengamos espacio alrededor de los niños. Asigne mainAxisAlignment como spaceAround como se muestra a continuación:

Ejemplo

import 'package:flutter/material.dart';
 
//function to trigger build
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ), // ThemeData
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    ); // MaterialApp
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
      ), // AppBar
      // App body consists of single Column
      // Column consists of three children widgets
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "GeeksForGeeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "GeeksForGeeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "GeeksForGeeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          )
        ],
      ), // Column
    );
  }
}

Producción:

Algunos ejemplos más son:

mainAxisAlignment.spaceEvenly

mainAxisAlignment.spaceEvenly

mainAxisAlignment.center

mainAxisAlignment.center

mainAxisAlignment.spaceBetween

mainAxisAlignment.spaceBetween

También podemos alinear el contenido mediante una combinación de mainAxisAlignment y crossAxisAlignment tanto para Fila como para Columna. Tomemos un ejemplo de Row, configure mainAxisAlignment como MainAxisAlignment.spaceAround y crossAxisAlignment como CrossAxisAlignment.stretch . Al hacer esto ( crossAxisAlignment.stretch ), la altura de la fila será igual a la altura del cuerpo porque solo tenemos una fila.

Producción:

Inconvenientes:

• La fila no tiene desplazamiento horizontal, por lo que cuando se inserta una gran cantidad de niños en una sola fila que no puede caber en la fila, nos dará un mensaje de desbordamiento ( por ejemplo : derecho desbordado por 560 px).
• La columna no tiene desplazamiento vertical, por lo que cuando se inserta una gran cantidad de niños en una sola columna cuyo tamaño total de niños es mayor que la altura total de la pantalla, nos dará un mensaje de desbordamiento (por ejemplo: parte inferior desbordada por 684 px).