Menu
CoddyTech

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.

challenge icon

Desafio

Fácil

Apó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'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconTeste seus conhecimentos

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

Pratique por conta própria: Compilador de Flutter online