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.
Desafío
FácilDespué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'),
],
),
),
),
);
}
}
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
1Botones
Tu primer botónImprimir en la consolaBotones de texto y contornoBotones con iconosEl botón de acción flotante7Interruptores y deslizadores
Encender y apagar con un interruptorMarcar una casillaElegir un valor con un deslizadorPractica por tu cuenta: Compilador de Flutter online