Create a button with rounded border

Question

How would you make a FlatButton into a button with a rounded border? I have the rounded border shape using RoundedRectangleBorder but somehow need to color the border.

new FlatButton(
  child: new Text("Button text),
  onPressed: null,
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)

Example of how button with rounded button would look :

score 242 · Accepted Answer · edited Apr 11 '21 at 12:27

242

Use OutlinedButton instead of FlatButton.

OutlinedButton(
  onPressed: null,
  style: ButtonStyle(
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
  ),
  child: const Text("Button text"),
);

edited Apr 11 '21 at 12:27

Thomas Weller

55,411
20
125
222

answered Apr 29 '18 at 11:11

Rémi Rousselet

256,336
79
519
432

Missed a closing quote after "Button text" – Ray Li Jun 06 '18 at 18:59
7

@RemiRousselet how can i change border color? – Farhana Naaz Ansari Jan 25 '19 at 13:32
@Farhana in Flutter when `onPressed: null`, it means that the button is disabled, just do something with onPressed and the color will show. – Loolooii May 20 '19 at 14:41
`FlatButton` has the `shape` parameter as well and can have rounded corners just the same - no need to use OutlineButton. – Hasen Aug 27 '19 at 14:18
4

@Hasen Well, using the same logic we can use `MaterialButton` for everything – Rémi Rousselet Aug 27 '19 at 14:37
@RémiRousselet, may I ask you to have a look at a Flutter related question here : https://stackoverflow.com/questions/60565658/fluter-image-picker-package-show-images-one-after-another-with-delete-action ? – Istiaque Ahmed Mar 26 '20 at 20:49
4

@Farhana, to set the border color of an OulinedButton, use its property borderSide: BorderSide(color: Colors.blue) – egidiocs Jan 19 '21 at 00:37
4

FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively. – jithin Jan 21 '21 at 06:57
3

@egidiocs I can't find borderSide property. where to set this property? – Alexa289 Jul 08 '21 at 07:47
with less typing, this answer https://stackoverflow.com/a/70232237/4481235 suggests using `style: OutlinedButton.styleFrom(shape, side)` then specify all available attributes if needed, which also works. – josevoid Mar 25 '22 at 06:50
@Alexa289, `RoundedRectangleBorder(side: const BorderSide(color: Color(0xff004BCB)), borderRadius: BorderRadius.circular(30.0)) ` – rodolfocop Sep 29 '22 at 19:14

score 87 · Answer 2 · answered May 04 '19 at 14:36

87

FlatButton(
          onPressed: null,
          child: Text('Button', style: TextStyle(
              color: Colors.blue
            )
          ),
          textColor: MyColor.white,
          shape: RoundedRectangleBorder(side: BorderSide(
            color: Colors.blue,
            width: 1,
            style: BorderStyle.solid
          ), borderRadius: BorderRadius.circular(50)),
        )

answered May 04 '19 at 14:36

wizmea

1,079
1
8
8

15

FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively. – jithin Jan 21 '21 at 06:57

score 58 · Answer 3 · edited Jun 13 '22 at 11:31

58

Use StadiumBorder shape

OutlineButton(
  onPressed: () {},
  child: Text("Follow"),
  borderSide: BorderSide(color: Colors.blue),
  shape: StadiumBorder(),
),

edited Jun 13 '22 at 11:31

Ravindra S. Patil

11,757
3
13
40

answered Dec 29 '18 at 09:57

Ahmed

2,221
14
18

10

For anyone who doesn't know, a StadiumBorder is a box with semi-circles on the end (like a track at a stadium, I guess) – MSpeed Feb 12 '20 at 17:52
You can try this also :shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)), – S.Govind Jul 01 '20 at 10:16

score 23 · Answer 4 · answered Oct 09 '18 at 20:16

23

new OutlineButton(  
 child: new Text("blue outline") ,
   borderSide: BorderSide(color: Colors.blue),
  ),

// this property adds outline border color

answered Oct 09 '18 at 20:16

cindy

476
6
8

8

If anyone is wondering why the color doesn't appear, in my case it's because you need to pass a `onPress` not null. – Felipe Augusto Mar 14 '19 at 15:53

score 23 · Answer 5 · answered Apr 30 '19 at 19:18

23

So I did mine with the full styling and border colors like this:

new OutlineButton(
    shape: StadiumBorder(),
    textColor: Colors.blue,
    child: Text('Button Text'),
    borderSide: BorderSide(
        color: Colors.blue, style: BorderStyle.solid, 
        width: 1),
    onPressed: () {},
)

answered Apr 30 '19 at 19:18

Optimoose

231
2
2

1

Simple and elegant solution ! – schankam Mar 04 '20 at 15:20

score 4 · Answer 6 · answered Nov 19 '18 at 16:37

For implementing the rounded border button with a border color use this

OutlineButton(
                    child: new Text("Button Text"),borderSide: BorderSide(color: Colors.blue),
                    onPressed: null,
                    shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0))
                ),

CopsOnRoad · Answer 7 · 2019-07-27T13:05:47.650

2

If you don't want to use OutlineButton and want to stick to normal RaisedButton, you can wrap your button in ClipRRect or ClipOval like:

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    child: Text("Button"),
    onPressed: () {},
  ),
),

edited Jul 27 '19 at 13:05

answered Feb 05 '19 at 16:20

CopsOnRoad

237,138
77
654
440

Create a button with rounded border

7 Answers7