How to change OutlinedButton border color?

Flutter widget, I tried to change the OutlineButton border color by using BorderSide(color : Colors.blue). The OutlineButton always with grey color border no matter which color is set, but width change is applicable. How to change the OutlineButton border line color?

class OutlineButtonWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Center(
child: OutlineButton(
onPressed: null,
borderSide: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
child: Text('outline button')
),
),
);
}
}

Style property will work
```
OutlineButton(
onPressed: (){},
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
),
),

```

**use *style* property**



style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid)))


----------
**or try this both work**


style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
)

----------


OutlinedButton(
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid))),
onPressed: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12.0),
child: Icon(
Icons.clear,
size: 24,
),
),
),
Text("Clear")
],
))



result may like this
[![enter image description here][1]][1]


[1]:

Use the`style` property:

```dart
OutlinedButton(
onPressed: () {},
child: Text('Outlined button'),
style: OutlinedButton.styleFrom(
side: BorderSide(width: 5.0, color: Colors.blue),
),
)
```

I was getting 'OutlineButton' is deprecated and shouldn't be used. Use OutlinedButton instead. See
the migration guide in flutter.dev/go/material-button-migration-guide).

Before migration code:

child: OutlineButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
color: Colors.orange,
borderSide: BorderSide(color: Colors.amber),
),


After migration code:

child: OutlinedButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
style: OutlinedButton.styleFrom(backgroundColor: Colors.orange, side: BorderSide(color: Colors.amber)),
),

Here is official ref of backgroundColor and color properties:

[To see links please register here]

[To see links please register here]

## Theming
I wanted to avoid manually theming each `OutlinedButton`, and use theming instead.

You can do this with `ThemeData`'s `outlinedButtonTheme`:
```dart
final color = ...;
ThemeData(
...
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
side: MaterialStateProperty.all(const BorderSide(color: color)),
// surfaceTintColor: MaterialStateProperty.all(Colors.blue),
)),
);
```

[![Animation using Flutter hot reload to change border style][1]][1]


[1]: