How to build an Icon Button in flutter that have a rectangular shape with border radius

ยท

2 min read

Table of contents

No heading

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.

ย