Flutter Fundamentos de diseño

El diseño es un concepto central en el desarrollo de la interfaz de usuario (UI) de Flutter.

En esta sección se presentan los widgets de diseño más comunes, incluidos Row, Column, Stack y Flex, entre otros.

Descripción general de los widgets de diseño

Flutter ofrece una amplia variedad de widgets de diseño que pueden satisfacer diversas necesidades de diseño de interfaz.

Widget	Uso
Row	Dispone los widgets secundarios horizontalmente
Column	Dispone los widgets secundarios verticalmente
Stack	Dispone los widgets secundarios en capas
Flex	Diseño lineal flexible (clase base de Row/Column)
GridView	Diseño de cuadrícula
ListView	Diseño de lista

Row - Diseño horizontal

Row se utiliza para disponer los widgets secundarios en dirección horizontal.

Ejemplo: uso básico de Row

// Disponer tres iconos horizontalmente
Row(
children: [
Icon(Icons.home, color: Colors.blue),
Icon(Icons.search, color: Colors.green),
Icon(Icons.settings, color: Colors.grey),
],
)

// Row con espacio entre elementos
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // Alineación del eje principal
children: [
Icon(Icons.home, color: Colors.blue),
Icon(Icons.search, color: Colors.green),
Icon(Icons.settings, color: Colors.grey),
],
)

mainAxisAlignment - Alineación del eje principal

Valor	Descripción
MainAxisAlignment.start	Alinear a la izquierda (predeterminado)
MainAxisAlignment.center	Alinear al centro
MainAxisAlignment.end	Alinear a la derecha
MainAxisAlignment.spaceBetween	Alinear a los extremos, con espacios iguales entre los elementos
MainAxisAlignment.spaceEvenly	Espaciado igual entre elementos y en los extremos
MainAxisAlignment.spaceAround	Espaciado igual entre elementos, mayor que el de los extremos

Column - Diseño vertical

Column se utiliza para disponer los widgets secundarios en dirección vertical.

Ejemplo: uso básico de Column

// Disponer tres textos verticalmente
Column(
children: [
Text('Primera línea', style: TextStyle(fontSize: 20)),
Text('Segunda línea', style: TextStyle(fontSize: 20)),
Text('Tercera línea', style: TextStyle(fontSize: 20)),
],
)

// Column con espacio y alineación
Column(
mainAxisAlignment: MainAxisAlignment.center, // Centro vertical
crossAxisAlignment: CrossAxisAlignment.start, // Izquierda horizontal
children: [
Text('Título', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Text('Contenido contenido contenido'),
const SizedBox(height: 8),
Text('Nota inferior'),
],
)

crossAxisAlignment - Alineación del eje transversal

Valor	Descripción
CrossAxisAlignment.start	Alinear arriba / a la izquierda
CrossAxisAlignment.center	Alinear al centro
CrossAxisAlignment.end	Alinear abajo / a la derecha
CrossAxisAlignment.stretch	Estirar para llenar el contenedor padre

Expanded y Flexible

Expanded y Flexible se utilizan para que los widgets secundarios llenen el espacio restante.

Ejemplo: uso de Expanded

// Ancho fijo + ancho adaptable
Row(
children: [
// Ancho fijo 100
Container(width: 100, height: 50, color: Colors.red),
// Ocupa el espacio restante
Expanded(
child: Container(height: 50, color: Colors.green),
),
// Ancho fijo 50
Container(width: 50, height: 50, color: Colors.blue),
],
)

// Proporciones de distribución
Row(
children: [
// Ocupa 1 parte
Expanded(
flex: 1,
child: Container(height: 50, color: Colors.red),
),
// Ocupa 2 partes
Expanded(
flex: 2,
child: Container(height: 50, color: Colors.green),
),
// Ocupa 1 parte
Expanded(
flex: 1,
child: Container(height: 50, color: Colors.blue),
),
],
)

Stack - Diseño en capas

Stack se utiliza para superponer widgets secundarios, y se usa frecuentemente para lograr efectos como elementos flotantes o capas superpuestas.

Ejemplo: uso de Stack

// Stack básico
Stack(
children: [
// Capa inferior: imagen de fondo
Container(
width: 200,
height: 200,
color: Colors.blue,
),
// Capa media: capa de superposición semitransparente
Container(
width: 180,
height: 180,
color: Colors.white.withOpacity(0.5),
),
// Capa superior: texto
const Center(
child: Text(
'Contenido superpuesto',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
],
)

// Stack con posición
Stack(
children: [
Container(color: Colors.grey[300]),
// Colocar en la esquina superior derecha
Positioned(
right: 10,
top: 10,
child: Icon(Icons.close, color: Colors.red),
),
// Colocar en la esquina inferior izquierda
Positioned(
left: 10,
bottom: 10,
child: Text('Texto en la esquina inferior izquierda'),
),
],
)

Padding y Margin

Use Padding y Margin para controlar el relleno interno y el margen externo de los elementos.

Ejemplo: Padding y Margin

// Uso de Padding para establecer el relleno interno
Padding(
padding: const EdgeInsets.all(16.0), // 16 píxeles en los cuatro lados
child: Text('Texto con relleno interno'),
)

// Establecer cada lado por separado
Padding(
padding: EdgeInsets.only(
left: 10,
right: 20,
top: 5,
bottom: 5,
),
child: Text('Relleno interno personalizado'),
)

// Uso de EdgeInsets.symmetric para márgenes simétricos
Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text('Horizontal 16, vertical 8'),
)

// Container combinando margin y padding
Container(
margin: const EdgeInsets.all(10), // Margen externo
padding: const EdgeInsets.all(16), // Relleno interno
decoration: BoxDecoration(
color: Colors.blue[100],
borderRadius: BorderRadius.circular(8),
),
child: Text('Contenido del contenedor'),
)

Scaffold y AppBar

Scaffold proporciona la estructura básica de página de Material Design, y AppBar es la barra de aplicación superior.

Ejemplo: estructura básica de Scaffold

// Scaffold de página de Material Design
Scaffold(
// Barra de aplicación superior
appBar: AppBar(
title: const Text('Mi aplicación'),
backgroundColor: Colors.blue,
elevation: 4, // Profundidad de sombra
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.settings),
onPressed: () {},
),
],
),
// Cuerpo de la página
body: const Center(
child: Text('Contenido del cuerpo de la página'),
),
// Botón flotante
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
// Barra de navegación inferior
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Inicio'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Buscar'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Mi'),
],
),
)

Otras extensiones