Menu
CoddyTech

Pulsanti con icona

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 4 di 34.

Alcuni pulsanti sono solo un'icona: un cuore, un cestino, una freccia di condivisione. Questo è un IconButton:

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

Non ha child:. Prende invece un icon:, che è lo stesso widget Icon che hai usato nella prima sezione. Un tocco mostra un'onda circolare attorno all'icona.

Un semplice Icon non può essere toccato: disegna solo un'immagine. IconButton lo trasforma in qualcosa che puoi premere.

challenge icon

Sfida

Facile

Dopo il testo Like this post, aggiungi un IconButton con Icons.thumb_up che stampa Liked quando viene premuto.

Provalo tu

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 iconMettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Rendere l’app interattiva

Esercitati da solo: Compilatore Flutter online