Icon Buttons

Part of the Making It Interactive section of Coddy's Flutter journey. Lesson 4 of 34.

Some buttons are only an icon: a heart, a trash can, a share arrow. That is an IconButton:

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

It has no child:. It takes an icon: instead, which is the same Icon widget you used in the first section. A tap shows a round ripple around the icon.

A plain Icon cannot be tapped: it only draws a picture. IconButton turns it into something you can press.

Challenge

Easy

After the text Like this post, add an IconButton with Icons.thumb_up that prints Liked when pressed.

Try it yourself

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