Todo es un widget: Text, Container e Icon

Comprende la gran idea de Flutter, el árbol de widgets, a través de tres bloques de construcción básicos: Text, Container e Icon.

8 min · 3 preguntas

En Flutter, todo es un widget. Un widget es un bloque de construcción de la interfaz: la descripción de una parte de lo que aparece en pantalla. Un texto es un widget, un icono es un widget, un espaciado es un widget... ¡y toda la pantalla también! Para construir una interfaz, anidas widgets unos dentro de otros, como muñecas rusas. Juntos forman el árbol de widgets: cada widget tiene un padre (el que lo contiene) y a veces hijos (los que contiene). Volvamos a nuestro programa mínimo y observemos su árbol.

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(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text(
            "Everything is a widget!",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

De arriba abajo: MaterialApp configura toda la app (tema, navegación) siguiendo Material 3, el lenguaje visual de Google. Scaffold (literalmente "andamio") proporciona la estructura de una pantalla: fondo, una barra de título opcional... Center centra a su hijo y Text muestra texto. El parámetro style de Text recibe un TextStyle que fija el tamaño (fontSize), el color o el grosor de los caracteres. Ahora descubramos Container, la caja multiusos: un rectángulo cuyo tamaño, color y contenido controlas.

import 'package:flutter/material.dart';

Widget buildYellowBox() {
  return Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: const Center(
      child: Text("I'm inside a box"),
    ),
  );
}

La función buildYellowBox devuelve un widget: dividir así tu interfaz en pequeñas piezas con nombre es una práctica muy común. Este Container mide 200 píxeles de ancho, 100 de alto, se pinta de amarillo ámbar gracias al catálogo de colores Colors y contiene un texto centrado. Tercer bloque de construcción básico: Icon, que muestra un pictograma. Flutter incluye cientos de iconos listos para usar en el catálogo Icons: una estrella, un corazón, una casa...

import 'package:flutter/material.dart';

Widget buildStar() {
  return const Icon(
    Icons.star,
    size: 48,
    color: Colors.orange,
  );
}

Recuerda la lógica del árbol: cuando un widget acepta un solo hijo, el parámetro se llama child (es el caso de Center y Container). En nuestro primer ejemplo, Scaffold es el padre de Center, que es el padre de Text. Flutter dibuja la pantalla recorriendo este árbol de arriba abajo. Si sabes decir quién es el padre de quién, puedes leer cualquier interfaz de Flutter.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. En Flutter, ¿qué es un widget?
   • Un bloque de construcción de la interfaz que describe una parte de la pantalla
   • Un archivo de configuración del proyecto
   • Una base de datos integrada en el teléfono
2. ¿Qué widget usas para mostrar un pictograma como una estrella?
   • Text
   • Container
   • Icon
3. En Center(child: Text("Hi")), ¿qué widget es el padre?
   • Text, porque está escrito al final
   • Center, porque contiene a Text mediante su parámetro child
   • Ninguno: los dos widgets son independientes