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

user_7234533 0
Viewed 4869

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

dart flutter button
3 Answers
user_6662210

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

user_61915910

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