Column

Widget Column en Flutter

El widget Column es una herramienta fundamental en Flutter para organizar elementos de la interfaz de usuario en una disposición vertical. Imagina una columna en una hoja de papel: cada elemento se coloca uno debajo del otro.

Características principales:

• Disposición vertical: Todos los hijos del widget Column se apilan uno encima del otro, creando una columna.
• Flexibilidad: Puedes controlar el tamaño de cada hijo utilizando propiedades como mainAxisAlignment y crossAxisAlignment para ajustar la alineación dentro de la columna.
• Expansión: El widget Expanded se utiliza dentro de Column para que un hijo ocupe todo el espacio disponible que no esté siendo utilizado por otros hijos.

Ejemplo básico:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(   
          title: Text('Ejemplo de Column'),
        ),
        body: Column(
          children: [
            Text('Primer elemento'),
            ElevatedButton(
              onPressed: () {
                // Acción al presionar el botón
              },
              child: Text('Botón'),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Explicación del código:

1. Creación de una columna: Se crea un widget Column y se le asignan varios hijos dentro de la lista children.
2. Elementos de la columna:
   • Text('Primer elemento'): Un simple texto como primer elemento.
   • ElevatedButton: Un botón que ocupa una línea.
   • Expanded: Un contenedor azul que ocupará todo el espacio restante de la columna gracias a Expanded.

Resultado:

Al ejecutar esta aplicación, verás una pantalla con una AppBar y una columna que contiene un texto, un botón y un contenedor azul que ocupa el resto del espacio.

Personalización:

Puedes personalizar aún más tu columna utilizando las siguientes propiedades:

• mainAxisAlignment: Controla la alineación principal de los hijos dentro de la columna (inicio, centro, fin, espacio entre, espacio alrededor).
• crossAxisAlignment: Controla la alineación cruzada de los hijos (inicio, centro, fin, estirar).
• mainAxisSize: Determina si la columna se ajusta al tamaño de sus hijos o si ocupa todo el espacio disponible.

Usos comunes:

• Crear listas: Las columnas son ideales para crear listas de elementos, como listas de tareas, contactos, etc.
• Organizar formularios: Puedes utilizar columnas para organizar los campos de un formulario en una disposición vertical.
• Diseñar layouts complejos: Combinando Column con otros widgets como Row, puedes crear layouts más complejos y adaptativos.

En resumen:

El widget Column es una herramienta esencial en Flutter para crear interfaces de usuario con una estructura vertical. Su flexibilidad y facilidad de uso lo convierten en un pilar fundamental para construir aplicaciones de alta calidad.