Layouts en Flutter
Resumen
● Los layouts en Flutter se construyen con widgets.
● Los widgets son clases utilizadas para construir interfaces de usuario (UIs).
● Los widgets también se usan para construir elementos de la UI.
● Usa widgets simples para crear widgets complejos.
El núcleo del mecanismo de layout de Flutter son los widgets. En Flutter, casi todo es un
widget, incluso los modelos de layout son widgets. Las imágenes, iconos y texto que ves en
una aplicación Flutter son todos widgets. Pero las cosas que no ves también son widgets,
como las filas (rows), columnas (columns) y grillas (grids) que organizan, restringen y
alinean los widgets visibles.
Ejemplo
En el siguiente ejemplo, imagen muestra tres iconos con etiquetas:
y en el segundo ejemplo incluye el layout visual para filas y columnas. En este ejemplo,
debugPaintSizeEnabled está configurado como true para que puedas ver el layout
visual.
● Layout: Organización espacial de los elementos en la pantalla
● debugPaintSizeEnabled: Herramienta de desarrollo para visualizar límites de
widgets
Este sería el árbol de widgets para el ejemplo anterior:
Contenedores y Layout de Widgets
Contenedores (Containers)
Vamos a ver los contenedores (mostrados en rosa). Container es una clase de widget que
te permite personalizar su widget hijo. Usa un Container cuando quieras agregar padding,
márgenes, bordes o color de fondo.
Cada widget Text se coloca en un Container para agregar márgenes. Todo Row también
se coloca en un Container para agregar padding alrededor de la fila.
El resto se controla mediante propiedades:
● Se establece el color de un Icon usando su propiedad color.
● Se usa la propiedad [Link] para establecer la fuente, su color, grosor, etc.
● Las columnas (Columns) y filas (Rows) tienen propiedades que te permiten
especificar cómo sus hijos se alinean vertical u horizontalmente, y cuánto espacio
deben ocupar los hijos.
Cómo hacer un Layout
Vamos a ver a continuación cómo crear y mostrar un widget simple. También todo el código
para una aplicación simple de "Hello World".
En Flutter, solo se necesitan unos pocos pasos para poner texto, un icono o una imagen en
la pantalla.
1er Paso
Eligir entre una variedad de widgets de layout, basándome en cómo quiero alinear o
restringir un widget visible, ya que estas características se pasan al widget contenido.
Por ejemplo, podemos usar el widget de layout Center para centrar un widget visible
horizontal y verticalmente:
Center(
//El contenido que se centrará.
)
● Center: Widget de layout que centra su contenido
2do - Crear un Visible Widget
Elige un visible widget para tu aplicación cuando contenga elementos visibles, como texto,
imágenes o iconos. Por ejemplo, podrías usar el widget Text para mostrar texto:
Text('Hello World')
3er - Agregar el Visible Widget al Layout Widget
Todos los widgets de layout tienen una de las siguientes opciones:
● Una propiedad child si toman un solo hijo—por ejemplo, Center o Container
● Una propiedad children si toman una lista de widgets—por ejemplo, Row, Column,
ListView o Stack
Agrega el widget Text al widget Center:
const Center(
child: Text('Hello World'),
),
4to Agregar el Layout Widget a la Página
Una aplicación Flutter es en sí misma un widget, y la mayoría de los widgets tienen un
método build(). Para ver el widge se debe instanciar y devolver un widget con en el
método build().
Estructura Jerárquica:
● App → Layout Widget → Visible Widget
● La estructura se construye de afuera hacia adentro
● Cada nivel encapsula y organiza el siguiente
● child: Para widgets que contienen un solo elemento
● children: Para widgets que contienen múltiples elementos
● build(): Método donde se construye la interfaz del widget
Aplicación Estándar (Standard App)
Para una aplicación general, puedes agregar el widget Container al método build() de
la aplicación:
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: [Link]),
child: const Center(
child: Text(
'Hello World',
textDirection: [Link],
style: TextStyle(fontSize: 32, color: Colors.black87),
),
),
);
}
}
Por defecto, una aplicación general no incluye un AppBar, título o color de fondo. Si quieres
estas características en una aplicación general, tienes que construirlas tú mismo. Esta
aplicación cambia el color de fondo a blanco y el texto a gris oscuro.
Elementos del Código:
● StatelessWidget: Widget que no cambia su estado
● build(): Método que construye la interfaz del widget
● BoxDecoration: Permite decorar el contenedor con colores, bordes, etc.
● [Link]: Especifica dirección del texto (left-to-right)
● TextStyle: Define el estilo visual del texto
Diferencias Clave:
● Aplicación General: Construcción manual de todos los elementos
● Material App: Incluye AppBar, título y tema por defecto
Material App
Para una aplicación Material, puedes usar un widget Scaffold; este proporciona un
banner predeterminado, color de fondo y tiene una API para agregar drawers, snack bars y
bottom sheets. Luego puedes agregar el widget Center directamente a la propiedad body
para la página principal.
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
const String appTitle = 'Flutter layout demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(title: const Text(appTitle)),
body: const Center(
child: Text('Hello World'),
),
),
);
}
}
Ventajas de Material App:
● Scaffold: Estructura básica con AppBar, body y otros elementos comunes
● Material Design: Sigue las pautas de diseño de Google
● Componentes integrados: Drawers, snack bars, bottom sheets incluidos
● Tema automático: Colores y estilos predefinidos
Comparación con Aplicación General:
● Material App: Elementos UI prediseñados y consistentes
● Aplicación General: Control total pero más trabajo manual
● Flexibilidad: Ambos enfoques pueden mezclarse según necesidades
Cupertino App
Para crear una aplicación Cupertino, usa los widgets CupertinoApp y
CupertinoPageScaffold. A diferencia de Material, no proporciona un banner
predeterminado o color de fondo. Necesitas configurar estos elementos tú mismo.
Configuración Manual Requerida:
● Para establecer colores predeterminados, pasa un CupertinoThemeData
configurado a la propiedad theme de tu aplicación.
● Para agregar una barra de navegación estilo iOS en la parte superior de tu
aplicación, agrega un widget CupertinoNavigationBar a la propiedad
navigationBar de tu scaffold. Puedes usar los colores que CupertinoColors
proporciona para configurar tus widgets y que coincidan con el diseño de iOS.
● Para organizar el cuerpo de tu aplicación, establece la propiedad child de tu
scaffold con el widget deseado como su valor, como Center o Column.
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return const CupertinoApp(
title: 'Flutter layout demo',
theme: CupertinoThemeData(
brightness: [Link],
primaryColor: [Link],
),
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: [Link],
middle: Text('Flutter layout demo'),
),
child: Center(
child: Column(
mainAxisAlignment: [Link],
children: [Text('Hello World')],
),
),
),
);
}
}
La biblioteca Cupertino implementa widgets que siguen las Pautas de Interfaz de
Apple para iOS. Al diseñar tu UI, puedes usar widgets de la biblioteca de widgets
estándar o de la biblioteca Cupertino. Puedes mezclar widgets de ambas bibliotecas,
puedes personalizar widgets existentes, o puedes construir tu propio conjunto de
widgets personalizados.
Características de Cupertino:
● Estilo iOS: Sigue las Interface Guidelines de Apple
● Configuración manual: Mayor control pero más trabajo de configuración
● CupertinoColors: Paleta de colores específica para iOS
● Flexibilidad: Combinable con widgets estándar y Material
Diferencias Clave:
● Material: Configuración automática, estilo Android/Google
● Cupertino: Configuración manual, estilo iOS/Apple
● Estándar: Base neutra, personalizable completamente
5to Ejecuta tu App
Después de haber agregado tus widgets, ejecuta tu aplicación. Cuando ejecutes la app,
deberías ver Hello World.
Pasos Completados:
1. Seleccionar un widget de layout (Center, Container, etc.)
2. Crear un widget visible (Text, Icon, Image)
3. Agregar el widget visible al widget de layout (child/children)
4. Agregar el widget de layout a la página (método build())
5. Ejecutar la aplicación (flutter run)
Resultado Esperado:
● La aplicación mostrará el texto "Hello World" en pantalla
● El layout dependerá del tipo de app elegida:
○ Standard App: Texto centrado con fondo blanco
○ Material App: Texto centrado con AppBar
○ Cupertino App: Texto centrado con navegación estilo iOS
Próximos Pasos:
Una vez que tengas funcionando tu "Hello World", puedes experimentar con:
● Cambiar el texto y sus estilos
● Agregar más widgets
● Explorar diferentes layouts
● Personalizar colores y temas
¡Espero tus capturas de pantalla para ver tu avance!
Has completado tu primer layout básico en Flutter. Ahora es momento de ejecutar tu
aplicación y ver los resultados. No olvides compartir:
● Screenshot de tu app funcionando
● Tus experimentos - Prueba cambiar colores, texto o agregar más widgets
● Cualquier problema - Si algo no funciona, comparte el error para poder ayudarte