Botões com ícones
Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 4 de 34.
Alguns botões são apenas um ícone: um coração, uma lixeira, uma seta de compartilhamento. Esse é um IconButton:
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
print('Deleted');
},
)Ele não tem child:. Em vez disso, recebe um icon:, que é o mesmo widget Icon que você usou na primeira seção. Ao tocar nele, uma animação circular aparece ao redor do ícone.
Um Icon simples não pode ser tocado: ele apenas desenha uma imagem. IconButton o transforma em algo que você pode pressionar.
Desafio
FácilApós o texto Like this post, adicione um IconButton com Icons.thumb_up que imprime Liked quando pressionado.
Experimente você mesmo
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 lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Tornando o app interativo
1Botões
Seu primeiro botãoImprimir no consoleBotões de texto e contornoBotões com íconesO botão de ação flutuante7Interruptores e controles deslizantes
Ligar e desligar com um interruptorMarcar uma caixa de seleçãoEscolher um valor com um controle deslizantePratique por conta própria: Compilador de Flutter online