El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En Flutter, los widgets de diseño son fundamentales para crear interfaces de usuario atractivas y funcionales. Estos widgets permiten organizar y estructurar los elementos visuales en la pantalla de manera eficiente. En esta sección, exploraremos los widgets de diseño más comunes y cómo utilizarlos para construir layouts complejos.

Column

El widget Column organiza sus hijos en una columna vertical. Es útil cuando se desea apilar widgets uno encima del otro.

Ejemplo

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('Column Example')),
        body: Column(
          children: <Widget>[
            Text('Item 1'),
            Text('Item 2'),
            Text('Item 3'),
          ],
        ),
      ),
    );
  }
}

Explicación

Column: Organiza los widgets Text en una columna vertical.
children: Lista de widgets hijos que se apilan verticalmente.

Row

El widget Row organiza sus hijos en una fila horizontal. Es útil para alinear widgets uno al lado del otro.

Ejemplo

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('Row Example')),
        body: Row(
          children: <Widget>[
            Text('Item 1'),
            Text('Item 2'),
            Text('Item 3'),
          ],
        ),
      ),
    );
  }
}

Explicación

Row: Organiza los widgets Text en una fila horizontal.
children: Lista de widgets hijos que se alinean horizontalmente.

Stack

El widget Stack permite apilar widgets unos sobre otros. Es útil para crear interfaces complejas donde los widgets se superponen.

Ejemplo

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('Stack Example')),
        body: Stack(
          children: <Widget>[
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
            Container(
              width: 150,
              height: 150,
              color: Colors.green,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

Explicación

Stack: Apila los contenedores uno sobre otro.
children: Lista de widgets hijos que se superponen.

Container

El widget Container es un widget versátil que puede contener un solo hijo y aplicar padding, márgenes, bordes y más.

Ejemplo

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('Container Example')),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            padding: EdgeInsets.all(20.0),
            margin: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Text('Hello, Container!'),
          ),
        ),
      ),
    );
  }
}

Explicación

Container: Un contenedor que puede aplicar padding, márgenes y decoraciones.
padding: Espacio interno alrededor del hijo.
margin: Espacio externo alrededor del contenedor.
decoration: Aplicación de estilos como color y bordes.

Expanded y Flexible

Los widgets Expanded y Flexible se utilizan dentro de Row y Column para controlar cómo se distribuye el espacio entre los hijos.

Ejemplo

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('Expanded and Flexible Example')),
        body: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.red,
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green,
              ),
            ),
            Container(
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

Explicación

Expanded: Expande el contenedor para llenar el espacio disponible.
Flexible: Permite que el contenedor se ajuste al espacio disponible sin forzar su tamaño.

GridView

El widget GridView permite crear una cuadrícula de widgets. Es útil para mostrar elementos en una disposición de rejilla.

Ejemplo

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('GridView Example')),
        body: GridView.count(
          crossAxisCount: 2,
          children: <Widget>[
            Container(color: Colors.red),
            Container(color: Colors.green),
            Container(color: Colors.blue),
            Container(color: Colors.yellow),
          ],
        ),
      ),
    );
  }
}

Explicación

GridView.count: Crea una cuadrícula con un número fijo de columnas.
crossAxisCount: Número de columnas en la cuadrícula.
children: Lista de widgets hijos que se organizan en la cuadrícula.

ListView

El widget ListView permite crear una lista de widgets desplazable. Es útil para mostrar una lista larga de elementos.

Ejemplo

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('ListView Example')),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }
}

Explicación

ListView: Crea una lista desplazable de widgets.
ListTile: Un widget de lista que puede contener un icono, un título y un subtítulo.

Ejercicios Prácticos

Ejercicio 1: Crear una Interfaz de Usuario con Column y Row

Crea una interfaz de usuario que contenga un Column con tres Row dentro. Cada Row debe contener tres Container de diferentes colores.

Solución

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('Exercise Solution')),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(width: 50, height: 50, color: Colors.red),
                Container(width: 50, height: 50, color: Colors.green),
                Container(width: 50, height: 50, color: Colors.blue),
              ],
            ),
            Row(
              children: <Widget>[
                Container(width: 50, height: 50, color: Colors.yellow),
                Container(width: 50, height: 50, color: Colors.orange),
                Container(width: 50, height: 50, color: Colors.purple),
              ],
            ),
            Row(
              children: <Widget>[
                Container(width: 50, height: 50, color: Colors.brown),
                Container(width: 50, height: 50, color: Colors.cyan),
                Container(width: 50, height: 50, color: Colors.pink),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Ejercicio 2: Crear una Cuadrícula con GridView

Crea una cuadrícula de 3x3 utilizando GridView.count donde cada celda contenga un Container de diferentes colores.

Solución

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('GridView Exercise Solution')),
        body: GridView.count(
          crossAxisCount: 3,
          children: <Widget>[
            Container(color: Colors.red),
            Container(color: Colors.green),
            Container(color: Colors.blue),
            Container(color: Colors.yellow),
            Container(color: Colors.orange),
            Container(color: Colors.purple),
            Container(color: Colors.brown),
            Container(color: Colors.cyan),
            Container(color: Colors.pink),
          ],
        ),
      ),
    );
  }
}

Conclusión

En esta sección, hemos explorado varios widgets de diseño en Flutter, incluyendo Column, Row, Stack, Container, Expanded, Flexible, GridView y ListView. Estos widgets son esenciales para construir interfaces de usuario complejas y bien organizadas. Asegúrate de practicar con los ejemplos y ejercicios proporcionados para dominar el uso de estos widgets en tus aplicaciones Flutter.

Widgets de Diseño

Contenido

Column

Ejemplo

Explicación

Row

Ejemplo

Explicación

Stack

Ejemplo

Explicación

Container

Ejemplo

Explicación

Expanded y Flexible

Ejemplo

Explicación

GridView

Ejemplo

Explicación

ListView

Ejemplo

Explicación

Ejercicios Prácticos

Ejercicio 1: Crear una Interfaz de Usuario con Column y Row

Solución

Ejercicio 2: Crear una Cuadrícula con GridView

Solución

Conclusión

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio