How to build an Icon Button in flutter that have a rectangular shape with border radius
Table of contents
No headings in the article.
I followed a Flutter tutorial today to create a todo list app. While working on the delete button, I encountered an issue with the animation. Instead of the desired effect, the button appeared circular when hovered or clicked, despite needing a rectangular shape with rounded corners.
Here's the code responsible for building the button:
class DeleteButton extends StatelessWidget {
const DeleteButton({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 35,
width: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: tdRed,
),
child: IconButton(
onPressed: () {},
color: Colors.white,
iconSize: 18,
icon: Icon(Icons.delete),
constraints: BoxConstraints(),
),
);
}
}
The problem lies with the IconButton()
widget, as it only supports circular shapes, causing the issue.
After spending an hour-long searching, I found a solution to implement the button as intended. Here's the new code:
class DeleteButton extends StatelessWidget {
const DeleteButton({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Ink(
decoration: const BoxDecoration(
color: tdRed,
borderRadius: BorderRadius.all(Radius.circular(5)),
),
height: 35,
width: 35,
child: InkWell(
onTap: () {},
borderRadius: const BorderRadius.all(Radius.circular(5)),
child: Container(
child: const Icon(
Icons.delete,
color: Colors.white,
size: 18,
),
),
),
);
}
}
Now the button appears as intended with a rectangular shape and rounded corners.
I know this post is really badly written, sorry about that. It's already late night I don't have much energy left to make it better I just wanted to share this code snippet for anyone who may need it and if I left it for tomorrow I'm sure that I won't do it so bad is better than nothing I guess.
If anyone thinks it's useful then I will rewrite it in a better way.