Row

Widget Row en Flutter

El widget Row es una herramienta fundamental en Flutter para organizar elementos de la interfaz de usuario en una disposición horizontal. Imagina una fila en una tabla: cada elemento se coloca uno al lado del otro.

Características principales:

• Disposición horizontal: Todos los hijos del widget Row se alinean horizontalmente, creando una fila.
• Flexibilidad: Puedes controlar el tamaño de cada hijo utilizando propiedades como mainAxisAlignment y crossAxisAlignment para ajustar la alineación dentro de la fila.
• Expansión: El widget Expanded se utiliza dentro de Row 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 Row'),
        ),
        body: Row(
          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 fila: Se crea un widget Row y se le asignan varios hijos dentro de la lista children.
2. Elementos de la fila:
   • Text('Primer elemento'): Un simple texto como primer elemento.
   • ElevatedButton: Un botón que ocupa un espacio en la fila.
   • Expanded: Un contenedor azul que ocupará todo el espacio restante de la fila gracias a Expanded.

Resultado:

Al ejecutar esta aplicación, verás una pantalla con una AppBar y una fila 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 fila utilizando las siguientes propiedades:

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

Usos comunes:

• Crear filas de elementos: Las filas son ideales para crear filas de elementos, como una lista de opciones, una barra de herramientas, etc.
• Organizar elementos en tarjetas: Puedes utilizar filas para organizar los elementos de una tarjeta en una disposición horizontal.
• Diseñar layouts complejos: Combinando Row con otros widgets como Column, puedes crear layouts más complejos y adaptativos.

En resumen:

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