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 |
onPressed | Your 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: