Flutter: The side property of OutlineButton seems to have no effect

Question

Produces an OutlineButton with a white border:

OutlineButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.purple
    )
  ),
)

Produces a FlatButton with a purple border:

FlatButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.purple
    )
  ),
)

Part of the documentation for OutlineButton:

borderSide → BorderSide Defines the color of the border when the button is enabled but not pressed, and the border outline's width and style in general. [...] final

For me, after I handle `onPressed` , then the border color starts to appear, of course, you need `borderSize` and `shape` — onmyway133, Mar 11 '19 at 08:20
@onmyway133 Hey, you can see the official answer below. I confused the side and the borderside property back then. Thanks anyways. — footurist, Mar 11 '19 at 15:43

score 10 · Accepted Answer · answered Nov 01 '18 at 19:53

10

OutlineButton has a property named borderSide you can use it directly :

        OutlineButton(
          borderSide: BorderSide(
              color: Colors.purple
            ),
        )

https://docs.flutter.io/flutter/material/OutlineButton/borderSide.html

answered Nov 01 '18 at 19:53

diegoveloper

93,875
20
236
194

That was ridiculous that I confused them, lol. Thanks anyways! – footurist Nov 01 '18 at 20:09

score 1 · Answer 2 · answered May 04 '21 at 10:13

With Flutter 2.0 OutlineButton is deprecated and you should use OutlinedButton instead.

Note: If you use shape property and want to give color to your border, then you should place side property in two places in order to have an effect. Like this:

  OutlinedButton(
    style: OutlinedButton.styleFrom(
      shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.all(Radius.circular(14)),
               side: BorderSide(color: Colors.black, width: 1.0), // HERE
          ),
      side: BorderSide(color: Colors.black, width: 1.0)), // AND HERE
     onPressed: () {},
     child: Text(
       'Details',
       style: TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w600,
          color: Colors.black,
     ),
   ),
 ),

I was able to define side in just the styleFrom, and left it null in the RoundedRectangleBorder. — Dylan Cross, Nov 07 '22 at 22:13

score 0 · Answer 3 · answered Sep 15 '20 at 10:34

0

handle onPressed:(){} like this. the color will appear. later You can change the function in onPressed. cheers...

answered Sep 15 '20 at 10:34

zakaria

163
1
8

Flutter: The side property of OutlineButton seems to have no effect

3 Answers3