Menu
CoddyTech

Botones con iconos

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 4 de 34.

Algunos botones son solo un ícono: un corazón, un bote de basura, una flecha para compartir. Eso es un IconButton:

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {
    print('Deleted');
  },
)

No tiene child:. En su lugar, recibe un icon:, que es el mismo widget Icon que usaste en la primera sección. Al tocarlo, aparece una onda circular alrededor del ícono.

Un Icon simple no se puede tocar: solo dibuja una imagen. IconButton lo convierte en algo que puedes pulsar.

challenge icon

Desafío

Fácil

Después del texto Like this post, agrega un IconButton con Icons.thumb_up que imprima Liked al presionarlo.

Pruébalo tú mismo

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Like this post'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Cómo hacerla interactiva

Practica por tu cuenta: Compilador de Flutter online