Flutter Mobile Development · Lección

Elementos interactivos de la interfaz

Implemente elementos interactivos habituales, como Buttons, TextFields, Images e Icons, para crear aplicaciones atractivas.

Elementos interactivos de la interfaz es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 3 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.

Engaging User Interaction

¡Bienvenido a la creación de interfaces de usuario interactivas! En Flutter, los elementos interactivos son clave para que tus aplicaciones sean útiles y divertidas de usar.

Estos elementos permiten a los usuarios tocar, escribir y ver contenido dinámico. Exploraremos los más comunes, como botones, campos de texto, imágenes e iconos.

Buttons: Your First Interaction

Los botones son fundamentales para las acciones del usuario. Flutter ofrece varios tipos de botones, cada uno adecuado para diferentes niveles de énfasis:

ElevatedButton: Un botón de diseño material con sombra, que indica un énfasis alto.
TextButton: Un botón con etiqueta de texto sin elevación, para acciones menos destacadas.
OutlinedButton: Un botón con borde, para acciones de énfasis medio.

Todos los botones suelen tener una función de devolución de llamada onPressed, que define lo que sucede cuando se toca el botón.

ElevatedButton in Action

El ElevatedButton es ideal para acciones principales. Veamos cómo crear uno que imprima un mensaje al ser presionado.

La propiedad onPressed recibe una función que se ejecuta cuando se presiona el 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('Elevated Button')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button Tapped!');
            },
            child: const Text('Tap Me!')
          ),
        ),
      ),
    );
  }
}

TextButton & OutlinedButton

Más allá de ElevatedButton, a menudo utilizarás TextButton y OutlinedButton.

TextButton es ideal para acciones secundarias, como "Cancelar" en un cuadro de diálogo.
OutlinedButton proporciona un borde visual, adecuado para acciones que necesitan un poco más de énfasis que un TextButton pero menos que un ElevatedButton.

Ambos comparten la propiedad onPressed para gestionar las pulsaciones.

TextFields for User Input

Para obtener la entrada de texto de los usuarios, Flutter proporciona el widget TextField. Es altamente personalizable para diversas necesidades de entrada, desde nombres simples hasta texto multilínea complejo.

A menudo utilizarás un TextEditingController con TextField para controlar y recuperar mediante programación la entrada de texto del usuario.

Building an Input Field

Aquí tienes un TextField básico que utiliza un TextEditingController. También añadiremos un botón para mostrar lo que el usuario escribió.

Observa cómo el controlador se pasa al TextField y se utiliza para obtener su texto actual.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose(); // Important to dispose controllers!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Text Field')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _controller,
                decoration: const InputDecoration(
                  labelText: 'Enter your name',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  print('User typed: ${_controller.text}');
                },
                child: const Text('Show Input'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Showing Visuals with Images

Las imágenes aportan atractivo visual a tu aplicación. El widget Image de Flutter puede cargar imágenes desde diversas fuentes:

Assets: Image.asset('assets/my_image.png') para imágenes locales incluidas en tu aplicación.
Red: Image.network('https://example.com/image.jpg') para imágenes de internet.
Archivos: Image.file(File('path/to/image.jpg')) desde el sistema de archivos del dispositivo.
Memoria: Image.memory(bytes) a partir de datos binarios sin procesar.

Loading an Image from Web

Mostremos una imagen directamente desde una URL usando Image.network. Esto es común para contenido dinámico.

Asegúrate de tener una conexión a internet para cargar imágenes de la red.

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('Network Image')),
        body: Center(
          child: Image.network(
            'https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup-horizontal.png',
            width: 250,
          ),
        ),
      ),
    );
  }
}

Icons for Clarity & Guidance

Los iconos son imágenes simbólicas pequeñas que transmiten significado rápidamente. Flutter cuenta con un amplio conjunto de iconos de Material Design integrados, accesibles a través de la clase Icons.

Para mostrarlos, se utiliza el widget Icon. Los iconos son excelentes para la navegación, para indicar acciones o simplemente para añadir un toque visual.

Adding a Simple Icon

Mostrar un icono es sencillo. Solo tienes que pasar un icono de la clase Icons al widget Icon. También puedes personalizar su color y tamaño.

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('Flutter Icon')),
        body: const Center(
          child: Icon(
            Icons.star, // A star icon
            color: Colors.amber,
            size: 100.0,
          ),
        ),
      ),
    );
  }
}

Interactive Elements Challenge

¿Cuáles de las siguientes son formas válidas de mostrar una imagen en Flutter utilizando los constructores del widget Image?

Wrapping Up Interactive UI

¡Buen trabajo! Has aprendido a implementar elementos de interfaz de usuario interactivos esenciales en Flutter. Cubrimos:

Botones: ElevatedButton, TextButton, OutlinedButton para acciones del usuario.
Campos de texto (TextFields): Para recopilar la entrada de texto del usuario.
Imágenes: Visualización de elementos gráficos desde activos o la red.
Iconos: Adición de pistas visuales simbólicas a tu aplicación.

Dominar estos elementos es crucial para crear aplicaciones de Flutter atractivas y fáciles de usar. ¡Sigue practicando!

Preguntas frecuentes

¿La lección «Elementos interactivos de la interfaz» es gratis?

Sí — el texto completo de «Elementos interactivos de la interfaz» 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 «Elementos interactivos de la interfaz»?

Implemente elementos interactivos habituales, como Buttons, TextFields, Images e Icons, para crear aplicaciones atractivas. 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 3 de 4.

¿Cuánto tiempo toma la lección «Elementos interactivos de la interfaz»?

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

← Volver a Flutter Mobile Development