IconButton in Flutter

18-Sep-2024

Learn how to use IconButton in Flutter to add interactive buttons with icons

The IconButton widget is used to create  icon-based buttons. Typically used for actions that are represented by symbols rather than text.

There Are Some Common Attributes for IconButton

icon
You Can Set Icon
onPressedYour button press logic goes here
tooltip
Tooltip to display on long press

Here's a simple example of using a IconButton in Flutter:

File open lib->main.dart file −




import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
runApp(
MyApp()
);
}
class MyApp extends StatefulWidget{

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('Icon Button Example',
style:TextStyle(fontSize: 20,color: Colors.white)),
),
body: Center(
child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(
Icons.star,
color: Colors.red, // Set the color of the icon
size: 70.0, // Set the size of the icon
),
onPressed: () {
// Your button press logic goes here
},
tooltip: 'Add Ratting', // Tooltip to display on long press
), IconButton(
icon: Icon(
Icons.add_box,
color: Colors.blue, // Set the color of the icon
size: 70.0, // Set the size of the icon
),
onPressed: () {
// Your button press logic goes here

},
tooltip: 'Add Product', // Tooltip to display on long press
),



],
),
)

));

}


}




Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.


Output:


Comments