Boutons avec icône

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 4 sur 34.

Certains boutons sont uniquement une icône : un cœur, une corbeille, une flèche de partage. C’est un IconButton :

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

Il n’a pas de child:. Il prend plutôt un icon:, qui est le même widget Icon que tu as utilisé dans la première section. Un appui affiche une ondulation circulaire autour de l’icône.

Un simple Icon ne peut pas être touché : il ne fait que dessiner une image. IconButton le transforme en quelque chose sur lequel tu peux appuyer.

Défi

Facile

Après le texte Like this post, ajoute un IconButton avec Icons.thumb_up qui affiche Liked lorsqu’on appuie dessus.

Essayez vous-même

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'),
            ],
          ),
        ),
      ),
    );
  }
}