CODEWITHSUNDEEP
flutterdart
Paprika
Paprika

Reputation: 174

How to create circular button with border in Flutter?

I found How to create a circle icon button in Flutter? which has this code:

RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

which works fine, but I can't insert a border with color. Looking on https://api.flutter.dev/flutter/painting/CircleBorder-class.html I cannot find any ways to insert a border.

What's the simplest way to insert a border in a circular button in Flutter?

Upvotes: 0

Views: 2288

Answers (2)

Ketan Ramteke
Ketan Ramteke

Reputation: 10655

here is how you can set the border for the button:

shape: CircleBorder(
        side: BorderSide(width: 5.0, style: BorderStyle.solid, color: Colors.red)
      ),

enter image description here

Upvotes: 0

bluenile
bluenile

Reputation: 6029

You can set the border by applying the side property to the CircleBorder. See the code below.

     RawMaterialButton(
      onPressed: () {},
      elevation: 2.0,
      fillColor: Colors.white,
      child: Icon(
        Icons.pause,
        size: 35.0,
      ),
      padding: EdgeInsets.all(15.0),
      shape: CircleBorder(
        side: BorderSide(width: 5, color: Colors.red, style: BorderStyle.solid),
      ),
    );

Upvotes: 1

Related Questions