Flutter: How to add outline/stroke border in IconButton?

Question

How to add outline/stroke border in IconButton? I tried to use the stack but this doesn't give the output as expected.

this is my code

SliverAppBar(
            leading: Stack(
              alignment: Alignment.center,
              children: [
                Icon(
                  Icons.arrow_back,
                  color: Colors.black,
                  size: 36,
                ),
                IconButton(
                  icon: new Icon(
                    Icons.arrow_back,
                    size: 24,
                  ),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ],
            ),
            //
            // another code
            //
          ),

The Output from the code above

I want to create an outline/stroke in IconButton like Text on the right side of the output.

Example of icon with customizable 'outline/stroke border color' and fill color

I tried to find a solution but I couldn't find it. is it possible to customize IconButton by adding an outline/stroke border with code only?

Answer 1

Depending on the icon, if it has an outlined/bordered version you could achieve this with a Stack. Example:

IconButton(
    icon: Stack(
        children: [
            Icon(Icons.favorite, color: Colors.red),
            Icon(Icons.favorite_border, color: Colors.white),
        ],
    ),
    onPressed: () => {},
),

This would show a red heart with a white outline.