Create a button with rounded border [duplicate]

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 :

Thomas Weller · Accepted Answer · 2021-04-11 12:27:55Z

246

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, 2021 at 12:27

Thomas Weller

61.2k23 gold badges143 silver badges263 bronze badges

answered Apr 29, 2018 at 11:11

Rémi Rousselet

280k89 gold badges560 silver badges456 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Farhana Naaz Ansari Over a year ago

@RemiRousselet how can i change border color?

Rémi Rousselet Over a year ago

@Hasen Well, using the same logic we can use MaterialButton for everything

egidiocs Over a year ago

@Farhana, to set the border color of an OulinedButton, use its property borderSide: BorderSide(color: Colors.blue)

jithin Over a year ago

FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively.

Agung Over a year ago

@egidiocs I can't find borderSide property. where to set this property?

|

wizmea · Accepted Answer · 2019-05-04 14:36:00Z

90

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 4, 2019 at 14:36

wizmea

1,1191 gold badge8 silver badges8 bronze badges

1 Comment

jithin Over a year ago

FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively.

Ravindra S. Patil · Accepted Answer · 2022-06-13 11:31:32Z

58

Use StadiumBorder shape

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

edited Jun 13, 2022 at 11:31

Ravindra S. Patil

15.3k5 gold badges22 silver badges60 bronze badges

answered Dec 29, 2018 at 9:57

Ahmed

2,32916 silver badges18 bronze badges

2 Comments

MSpeed Over a year ago

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)

S.Govind Over a year ago

You can try this also :shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),

Optimoose · Accepted Answer · 2019-04-30 19:18:31Z

24

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, 2019 at 19:18

Optimoose

3312 silver badges2 bronze badges

1 Comment

schankam Over a year ago

Simple and elegant solution !

cindy · Accepted Answer · 2018-10-09 20:16:56Z

22

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

// this property adds outline border color

answered Oct 9, 2018 at 20:16

cindy

4746 silver badges8 bronze badges

1 Comment

Felipe Augusto Over a year ago

If anyone is wondering why the color doesn't appear, in my case it's because you need to pass a onPress not null.

Faris Muhammed · Accepted Answer · 2018-11-19 16:37:33Z

5

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))
                ),

answered Nov 19, 2018 at 16:37

Faris Muhammed

1,05816 silver badges19 bronze badges

Comments

CopsOnRoad · Accepted Answer · 2019-07-27 13:05:47Z

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, 2019 at 13:05

answered Feb 5, 2019 at 16:20

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

Collectives™ on Stack Overflow

Create a button with rounded border [duplicate]

7 Answers 7

12 Comments

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

12 Comments

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Linked

Related