How to use IconButton in Flutter

Key takeaways

1. IconButton is a material design component in Flutter, primarily used to display icons that represent actions, which respond to user interactions like clicks. Some key features of IconButton are:

   1. It supports built-in or custom icons.

   2. It provides an onPressed property for executing functions when the button is clicked.

   3. It has customizable appearance with properties like iconSize, color, and tooltip.

2. You start by creating a Flutter project, defining the UI in the main.dart file and adding an IconButton within a Scaffold.

3. The app has a main screen with an IconButton that navigates to a separate settings page using Navigator.push when clicked.

4. The settings page is defined in a separate file (settings.dart) and showcases how StatefulWidgets can be used for further interactions.

5. Main components like MaterialApp, Scaffold, and IconButton form the structure of the app.

Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers to create beautiful and responsive user interfaces across multiple platforms.

Icon button

An IconButton in Flutter is a type of button that consists of an icon, typically representing a specific action. It is a part of the Flutter framework’s material design components.

Key features

Here are some of the key features of IconButton:

• An IconButton is primarily used for displaying icons. We can choose from built-in icons provided by Flutter, or we can also use custom icons.

• The IconButton can respond to user interactions, such as clicks. We can define a callback function that will be executed when the button is pressed by using the onPressed property.

• We can also customize the appearance of the IconButton by adjusting properties such as color, iconSize, tooltip, and more. This allows us to integrate the button seamlessly into your application’s design.

Creating an IconButton

Let’s follow the steps below to create an IconButton in the Flutter application:

1. Create a Flutter project

Let’s start by creating a new Flutter project. For this, open the terminal and execute the following commands:

2. Create the user interface

Let's create a simple IconButton on the inside the MyHomePage class in main.dart file. Here is the code:

Now, we will create a settings page which will open when we click the IconButton. Let's create a new file named settings.dart and write the following code in it.

This code creates a basic settings page in a Flutter application. The settings page includes an app bar with a title and a centered text message indicating that it's the settings page. As a StatefulWidget, the Settings class can be expanded to include interactive elements or state changes in the future.

3. Complete implementation

Following is the complete code of the Flutter application with the implementation of IconButton:

Note: You can find your application running at the given link once you run the code widget above.

Code explanation

• Lines 1–2:

  • import 'package:flutter/material.dart';: This imports the Flutter Material package, which provides various widgets and themes to build a Material Design application.

  • import 'package:imagezoom/settings.dart';: This imports a custom settings file from the imagezoom package. This file likely contains the Settings widget that will be navigated to when the icon button is pressed.

• Lines 4–6:

  • void main(): This is the entry point of the application. It is where the Flutter app starts executing.

  • runApp(MyApp());: This function takes the MyApp widget and makes it the root of the widget tree. It initializes the app.

• Lines 8–21:

  • class MyApp extends StatelessWidget: This defines a new stateless widget called MyApp, which means it doesn’t hold any mutable state.

  • @override: This annotation indicates that the build method is overriding a method from its superclass.

  • Widget build(BuildContext context): The build method returns a widget tree. It takes BuildContext as a parameter, which contains information about the location of this widget in the widget tree.

  • return MaterialApp(...): This returns a MaterialApp widget, which is the main app container that provides routing, themes, and other functionalities.

  • debugShowCheckedModeBanner: false: This hides the debug banner in the top right corner of the app.

  • title: 'Icon Button': This sets the title of the app, which is displayed in the app switcher.

  • theme: ThemeData(...): This sets the theme for the application.

  • colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple): This creates a color scheme based on a seed color (deep purple in this case).

  • useMaterial3: true: This enables Material Design 3, the latest version of Material Design.

  • home: MyHomePage(),: This sets the home screen of the app to the MyHomePage widget.

• Lines 23–42:

  • class MyHomePage extends StatelessWidget: This defines a new stateless widget called MyHomePage.

  • @override: This indicates that the build method is being overridden.

  • Widget build(BuildContext context): This is the method that builds the widget tree for this page.

  • return Scaffold(...): This returns a Scaffold widget, which provides a structure for the visual interface, including an app bar, body, and more.

  • appBar: AppBar(...): This defines the app bar at the top of the screen. The title: const Text('Icon Button') sets the title of the app bar to "Icon Button".

  • body: Center(...): This centers its child widget within the body of the scaffold. The child: IconButton(...) creates an icon button.

  • icon: const Icon(Icons.settings): This uses the settings icon from the Material Icons.

  • onPressed: () {...}: This defines the callback function that is executed when the button is pressed.

  • Navigator.push(...): This pushes a new route onto the navigator's stack, which means it navigates to a new screen.

  • context: This is the current build context.

  • MaterialPageRoute(...): This creates a route for the new screen.

  • builder: (context) => Settings(): This specifies that the new screen to navigate to is the Settings widget, which is defined in the imported settings file.

Conclusion

The IconButton in Flutter is a simple yet powerful widget for creating interactive and visually appealing buttons that use icons to represent actions. It offers flexibility in customization and allows developers to handle user interactions efficiently. With the ability to trigger navigation or any other functionality through the onPressed callback, icon buttons are essential for creating seamless user experiences in modern mobile applications. Understanding how to implement and customize IconButton is crucial for developers looking to build intuitive, responsive interfaces in Flutter applications.