Widgets básicos de diseño
Domine widgets de diseño esenciales como Row, Column, Container y Stack para crear interfaces de usuario estructuradas y adaptables.
Widgets básicos de diseño es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.
Why Layouts Matter
En Flutter, ¡todo es un widget! Para crear interfaces de usuario complejas y hermosas, necesitas organizar estos widgets en la pantalla.
Los widgets de diseño son widgets especiales diseñados para ayudarte a organizar otros widgets, definiendo su tamaño, posición y cómo interactúan entre sí.
Meet the Container
El widget Container es uno de los widgets de diseño más versátiles. Piense en él como una caja personalizable que puede contener un solo widget hijo.
Puede usarlo para:
- Añadir relleno (padding) o márgenes
- Establecer colores de fondo o decoraciones
- Definir un ancho y alto específicos
- Transformar su posición o rotación
Simple Colored Box
Vamos a crear un Container básico con un widget Text como hijo. Observa cómo establecemos su color y su padding.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Container Demo')),
body: Center(
child: Container(
padding: const EdgeInsets.all(20.0),
color: Colors.blueAccent,
child: const Text(
'Hello from Container!',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}Horizontal with Row
Cuando necesites organizar varios widgets uno al lado del otro horizontalmente, el widget Row es tu mejor opción. Este toma una lista de widgets como sus children.
Row intenta ajustar automáticamente a sus hijos a lo largo del eje horizontal, y puedes controlar su alineación dentro de la fila.
Row of Buttons
Aquí te mostramos cómo puedes colocar tres botones uno al lado del otro usando un Row. Añadiremos un poco de espacio entre ellos.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Row Demo')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
],
),
),
),
);
}
}Vertical with Column
Del mismo modo que Row organiza los widgets horizontalmente, el widget Column los organiza verticalmente, uno debajo del otro.
También acepta una lista de children y le permite controlar su alineación vertical.
Stacked Text Fields
Vamos a crear un formulario de inicio de sesión sencillo utilizando una Column para apilar verticalmente dos TextField y un botón.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Column Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(labelText: 'Username'),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
),
ElevatedButton(onPressed: () {}, child: const Text('Login')),
],
),
),
),
);
}
}Aligning Children
Tanto Row como Column utilizan dos propiedades importantes para la alineación:
mainAxisAlignment: Cómo se posicionan los hijos a lo largo del eje principal (horizontal paraRow, vertical paraColumn). Ejemplos:start,center,end,spaceAround.crossAxisAlignment: Cómo se posicionan los hijos a lo largo del eje perpendicular (vertical paraRow, horizontal paraColumn). Ejemplos:start,center,end,stretch.
¡Esto te brinda un control preciso sobre tus diseños!
Overlapping with Stack
A veces necesitas colocar widgets uno encima del otro, como texto sobre una imagen. Ahí es donde entra en juego el widget Stack.
Stack te permite superponer múltiples widgets hijos. Puedes controlar su posición exacta dentro de la pila usando el widget Positioned.
Image with Text Overlay
Vamos a colocar algo de texto directamente sobre una imagen usando un Stack. Usaremos Positioned para ubicar el texto con precisión.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Stack Demo')),
body: Center(
child: SizedBox(
width: 300,
height: 200,
child: Stack(
children: <Widget>[
Image.network(
'https://picsum.photos/300/200',
fit: BoxFit.cover,
),
const Positioned(
bottom: 10,
left: 10,
child: Text(
'Beautiful Scenery',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
shadows: [
Shadow(blurRadius: 5, color: Colors.black)
],
),
),
),
],
),
),
),
),
);
}
}Layout Challenge
¿Cuál de los siguientes widgets se utiliza principalmente para organizar varios widgets secundarios en una sola dirección (ya sea horizontal o verticalmente)?
Layouts Mastered!
¡Buen trabajo! Ahora dominas los widgets de diseño fundamentales en Flutter:
Container: Una caja versátil para un solo hijo, que ofrece control de relleno (padding), margen, color y tamaño.Row: Organiza múltiples hijos horizontalmente.Column: Organiza múltiples hijos verticalmente.Stack: Superpone hijos unos sobre otros, a menudo utilizado conPositioned.
¡Entender estos widgets es clave para construir cualquier interfaz de usuario en Flutter!
Preguntas frecuentes
¿La lección «Widgets básicos de diseño» es gratis?
Sí — el texto completo de «Widgets básicos de diseño» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.
¿Qué aprenderé en «Widgets básicos de diseño»?
Domine widgets de diseño esenciales como Row, Column, Container y Stack para crear interfaces de usuario estructuradas y adaptables. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Flutter Mobile Development?
No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Widgets básicos de diseño»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?
Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Widgets Stateless frente a Stateful
- Widgets básicos de diseño
- Elementos interactivos de la interfaz
- Creación de listas desplazables con ListView