IconButton in Flutter - Mini App: Build & Ship

Build: IconButton Demo

This screen shows an IconButton that changes a text message when pressed.

Target UI

---------------------
| IconButton Demo   |
|-------------------|
| [IconButton]      |
|                   |
| Message:          |
|                   |
|                   |
---------------------

Add an IconButton with a heart icon.

When the IconButton is pressed, update the text below to say 'You pressed the heart!'.

The initial text should say 'Press the icon'.

Use a Scaffold with an AppBar titled 'IconButton Demo'.

Center the IconButton and text vertically and horizontally.

Starter Code

Flutter

import 'package:flutter/material.dart';

class IconButtonDemo extends StatefulWidget {
  @override
  State<IconButtonDemo> createState() => _IconButtonDemoState();
}

class _IconButtonDemoState extends State<IconButtonDemo> {
  String message = 'Press the icon';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IconButton Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add IconButton here
            // TODO: Add Text widget here to show message
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class IconButtonDemo extends StatefulWidget {
  @override
  State<IconButtonDemo> createState() => _IconButtonDemoState();
}

class _IconButtonDemoState extends State<IconButtonDemo> {
  String message = 'Press the icon';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IconButton Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: Icon(Icons.favorite),
              color: Colors.red,
              iconSize: 48.0,
              onPressed: () {
                setState(() {
                  message = 'You pressed the heart!';
                });
              },
              tooltip: 'Favorite',
            ),
            SizedBox(height: 16),
            Text(
              message,
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

We use a StatefulWidget to keep track of the message text. The IconButton shows a heart icon in red color and a bigger size for visibility. When the user taps the IconButton, the onPressed callback runs, updating the message state to 'You pressed the heart!'. The Text widget below shows the current message. The UI is centered vertically and horizontally using Center and Column with mainAxisSize.min to keep content compact.

Final Result

Completed Screen

---------------------
| IconButton Demo   |
|-------------------|
|       ♥           |
|                   |
| You pressed the   |
| heart!            |
|                   |
---------------------

When the user taps the heart icon, the text below changes from 'Press the icon' to 'You pressed the heart!'.

Stretch Goal

Add a second IconButton with a star icon that resets the message to 'Press the icon' when pressed.

💡 Hint

Add another IconButton next to the heart icon inside a Row widget. Use setState to reset the message.