In this article, we will discuss flutter icon button in detail, how we can change the icon button size, how can we implement flutter icon button with text below, icon button with text implementation, how to achieve flutter icon button no splash, the usage and implementation of icon button onpressed function by using an icon button example, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter icon button.
Introduction: Flutter Icon Button
Basically flutter icon button, as the name suggests, is a button having icon and of course, more properties which we will look into in a bit. Let’s see how to implement it.
Implementation
IconButton(onPressed: () {}, icon: Icon(Icons.email))- Flutter icon button onpressed constructor is called whenever the uses clicks on the icon button, it is used to perform some actions when the user presses it.
- Flutter icon constructor is used to show an icon in the button, in our case, we have used an email icon.
Let’s now see how the icon button will look after we run our app now:
As you can see, we now see an icon button with a simple icon, and is also clickable but we haven’t specify any functions yet. Let’s now customize it.
When we click on the flutter icon button then this grey colored circular background appears.
Flutter Icon Button Color
color: Colors.blue
Flutter Icon Button Size
iconSize: 30
Flutter Icon Button Splash Radius
splashRadius: 100
Flutter Icon Button Disabled
disabledColor: Colors.grey onPressed:null
Flutter Icon Button OnPressed
onPressed: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Icon button pressed')));
}
Flutter Icon Button Padding
padding: EdgeInsets.all(100)
Flutter Icon Button Splash Color
splashColor: Colors.red
Flutter Icon Button Tooltip
tooltip: 'Icon Button'
Flutter Icon Button Constraints
constraints: BoxConstraints(minHeight: 500, minWidth: 500)
Custom Flutter Icon Button Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Beautiful Icon Button',
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatelessWidget {
const Homepage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: IconButton(
tooltip: 'Icon Button',
onPressed: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Icon button pressed')));
},
color: Colors.blue,
splashRadius: 60,
disabledColor: Colors.grey,
splashColor: Colors.red,
padding: EdgeInsets.all(100),
iconSize: 30,
constraints: BoxConstraints(minHeight: 500, minWidth: 500),
icon: Icon(Icons.email),
),
)),
);
}
}Conclusion
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks for reading.
