Widgets Esenciales en Flutter: Container, Row, Column y Text

Clase 6 de 26 • Curso de Flutter

Contenido del curso

Introducción a Flutter y Dart

Widgets en Flutter

Manejo de Recursos y Formularios

Navegación y APIs

Gestión de Estados

Experiencia de Usuario

Publicación de Apps

Tomar examen

Resumen

Crear aplicaciones con Flutter permite desarrollar interfaces altamente personalizadas, y para ello es fundamental comprender widgets clave como Container, Row, Column y Text. En este artículo, exploraremos cómo utilizarlos para estructurar y personalizar el cuerpo de tu aplicación.

¿Cómo estructurar el cuerpo de tu aplicación en Flutter?

Antes de agregar widgets, es esencial formatear el código para visualizar la jerarquía correctamente. Usa un formatter, selecciona Dart y observa la disposición en cascada de los widgets.
Inicia con un widget Container. Es una caja flexible que puede contener otros widgets, personalizable con propiedades como:
- Padding y margin: Para espaciar elementos.
- Border y color: Para estilos visuales.
- Box model: Define el diseño y estructura.

¿Cómo crear tarjetas con información?

Usa Container para estructurar las tarjetas:
- Divide las tarjetas en dos secciones: una para la imagen y otra para el texto.
- Agrega un widget Row para alinear los elementos horizontalmente.
Configura la imagen:
- Crea un Container con propiedades de tamaño (height y width).
- Aplica el widget ClipRRect para bordes redondeados con la propiedad borderRadius.
Organiza el contenido textual:
- Utiliza un widget Column para colocar elementos en una disposición vertical.
- Añade texto con Text, como el nombre de la receta y el autor.
- Usa un Container con un color (ej. naranja) para añadir una línea separadora decorativa.

¿Cómo agregar espaciado y adaptabilidad?

Espaciado: Incorpora SizedBox para separar elementos horizontal o verticalmente según el contexto (width o height).
Adaptabilidad: Implementa MediaQuery para ajustar el tamaño de los widgets según la pantalla del dispositivo, especialmente útil para diseños responsive.

¿Qué prácticas facilitan el desarrollo en Flutter?

Formatea el código constantemente para mantener la jerarquía clara.
Experimenta con diferentes widgets como Row, Column y Text para dominar su comportamiento.
Utiliza propiedades como MediaQuery para diseños flexibles y adaptables.

Comentarios

Santiago Espinel

student•

Este curso va a la velocidad de la luz

Jess Jay

student•

Estoy de acuerdo lanzo el container con todos los juguetes jajaaja

Sergio Olivo Orellana

student•

Sii, No se que pasa pero ahí vamos..

Jess Jay

student•

Me pregunto si seria posible que expliquen de una forma mas grafica el container y su contenido en esta clase

Jonathan Vera Segura

student•

ya que l aprofesora no muestra nada visual. aca les dejo un aporte !Flutter Layout Basics: Rows, Columns, and Containers

Julieta Melek Fernanda Eyzaguirre Arenas

student•

muchas gracias

Eminson Mendoza

student•

Me parece excelente la iniciativa de explicar cada widget. Sin embargo, creo que sería aún más efectivo si se comenzara con una representación visual, como un gráfico o diseño UI, que muestre cómo se ve cada elemento en la vista móvil. De esta manera, todos podríamos aprender de manera más intuitiva y visual, relacionando cada concepto con su representación en la pantalla. Esto mejoraría significativamente la comprensión y retención de la información.

Juan Guillermo Perez Cardozo

student•

es muy facil de entender , lo unico que hasta ahora veo como raro es que el anidamiento de los widgets parece el callback hell de js , peero pues esto es otro lenguaje

Armando Martínez

student•

Me parece que los siguientes pasos serían separar o encapsular los widgets en clases en otro archivo, importarlos y de esa manera podemos tener una mejor organización.

Gregson Murcia Castro

student•

En esta clase casi no pude ver lo que escribe la profesora, seria bueno saber el porque del porque, mas que solo codear porque si

Santiago Andres Gelvez Camargo

student•

A modo de tip, en los container pueden colocar una propiedad color y jugar con los tamaños para entender a fondo qué hace cada widget.

No entendía muy bien cada cosa del Row pero jugando un poco, me va quedando mas claro.

Alex Henrry Naupay Ferrer

student•

Podrían poner el diseño UI?

Yamid Horacio Rodríguez

student•

¡Que emoción avanzar y ver los resultados de este curso!, Thanksss

Iván Ignacio Alvarado Diaz

student•

Cuando escribes BorderRadius.circular(10), ¿El 10 que representa? ¿son pixeles, dp, em? ¿como es que se miden los tamaños de margenes, paddings, width, height?

Alison Jimenez

teacher•

Son pixeles Ivan

Dave Juanes

student•

Genial gracias Alison! espere años por la escula de flutter

Julieta Melek Fernanda Eyzaguirre Arenas

student•

realmente flutter se puede hacer muchas cosas, mi duda es solo en main se agrega todo, o debo ppor ejemplo por cada receta o pagina generar un codigo dart

José Galvis

student•

Hola JUlieta:

Flutter permite hacer muchas cosas, pero no se pone todo en main.dart.

main solo inicia la app.

El código se separa por pantallas y responsabilidades, en diferentes package, aplicando modularidad (SOLID) para facilitar mantenimiento y escalabilidad.

Saludos!

Oscar Giraldo Castillo

student•

Quizás ayude agregar colores:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Hola mundo',
      home: RecipeBook(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class RecipeBook extends StatelessWidget {
  const RecipeBook({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: const Text('Recipe Book', style: TextStyle(color: Colors.white)),
        leading: IconButton(icon: const Icon(Icons.add), onPressed: () {}),
      ),
      body: Container(
        color: const Color.fromARGB(255, 178, 15, 15),
        width: MediaQuery.of(context).size.width,
        height: 125,
        child: Card(
          child: Row(
            children: <Widget>[
              Container(
                height: 125,
                width: 100,
                color: const Color.fromARGB(255, 46, 27, 216),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Container(
                    color: const Color.fromARGB(255, 236, 244, 20),
                  ),
                ),
              ),
              Container(
                width: 26,
                color: const Color.fromARGB(255, 13, 162, 70),
              ),
              Column(
                children: <Widget>[
                  Text('Lasagna'),
                  Text('Oscar Giraldo'),
                  Container(height: 2, width: 75, color: Colors.orange),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Diego Andrés Lopez Rodriguez

student•

gabriel morffes

student•

Para lograr entender la clase es necesario tener bases fuertes de desarrollo en otros lenguajes aunque claro cambian ciertas cosas pero llegan a tener cierta similitud

Daniel Condía Figueredo

student••

Es una combinación algo extraña pero me ayudo a visualizar mentalmente y entender como va funcionando el codigo.

-> Cada widget es como una etiqueta de HTML. Puede contener otra etiquetas internas y cada etiqueta tiene su propia responsabilidad.

Ej: HTML => <div></div> equivale a Flutter => Container.

HTML => <span> equivale a Flutter => Text

-> El retorno de los Widget embebidos tiene una gran cantidad de diseño, esto se puede comparar como los componentes de Angular, cada componente puede ser reutilizado y usado en otro componente que a su vez tiene más componentes embebidos, asi como Widgets dentro de más Widgets

-> Todo lo anterior más la sintaxis muy parecida a la de java y siguiendo la programación orientada a objetos siguiendo los 4 pilares de OOP me ayudo a entender como se va componiendo Flutter

Jonathan Vera Segura

student•

una representación visual, como un gráfico o diseño UI, que muestre cómo se ve cada elemento en la vista móvil. De esta manera, todos podríamos aprender de manera más intuitiva y visual,

Julian Mauricio Perez Mora

student•

No tienes que borrar todo. La clase explica cómo ir añadiendo nuevos widgets como Container, Row, Column y Text al código existente para construir el cuerpo de la app, manteniendo lo que ya tenías de la AppBar.

Juddy Tatiana Vargas Santofimio

student•

Es normal que algunos componenetes aparezcan subrayados en azul, ¿esto que quiere decir?

Jess Jay

student•

Que curso va antes del basico 😂?

ignacio romero

student•

y mas basico que esto, seria algun curso de introducion a la programacion

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Hola mundo',
      home: RecipeBook(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class RecipeBook extends StatelessWidget {
  const RecipeBook({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: const Text('Recipe Book', style: TextStyle(color: Colors.white)),
        leading: IconButton(icon: const Icon(Icons.add), onPressed: () {}),
      ),
      body: Container(
        color: const Color.fromARGB(255, 178, 15, 15),
        width: MediaQuery.of(context).size.width,
        height: 125,
        child: Card(
          child: Row(
            children: <Widget>[
              Container(
                height: 125,
                width: 100,
                color: const Color.fromARGB(255, 46, 27, 216),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Container(
                    color: const Color.fromARGB(255, 236, 244, 20),
                  ),
                ),
              ),
              Container(
                width: 26,
                color: const Color.fromARGB(255, 13, 162, 70),
              ),
              Column(
                children: <Widget>[
                  Text('Lasagna'),
                  Text('Oscar Giraldo'),
                  Container(height: 2, width: 75, color: Colors.orange),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Widgets Esenciales en Flutter: Container, Row, Column y Text

Introducción a Flutter y Dart

Desarrollo de Apps Multiplataforma con Flower de Google

Configuración de Flutter y Dart para Desarrollo de Apps Multiplataforma

Despliegue y Estructura Básica de una App con Flutter

Programación en Dart: Variables, Funciones y Clases Básicas

Widgets en Flutter

Creación de Widgets Stateless en Flutter para Recetario Interactivo