Cannot change border color in OutlinedButton - flutter

Question

I'm trying to change the border of my OutlinedButton in my main.dart but it doesn't seem to be working. I've been looking around and it seems like I need to add BorderSide. This is what my outlinedButtonTheme looks like:
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return AppColors.SecondaryButtonPressed;
}
return AppColors.SecondaryButton;
},
),
minimumSize: MaterialStateProperty.all<Size>(Size(335, 60)),
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
side: BorderSide(
style: BorderStyle.solid,
color: AppColors.Primary,
width: 1), // <-- this doesn't work?
borderRadius: BorderRadius.all(Radius.circular(12)),
)),
foregroundColor: MaterialStateProperty.all<Color>(
AppColors.SecondaryButtonText),
textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(
color: AppColors.SecondaryButtonText,
fontSize: 14 * FONT_SCALE_FACTOR,
fontWeight: FontWeight.w600,
)),
),
),
Shown above where BorderSide is. It doesn't seem like this is working at all.

Answer 1

This works for me:
OutlinedButton(onPressed: () {},
style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))),
side: MaterialStateProperty.all(BorderSide(
color: AppColors.blue,
)),
),)

Answer 2

I followed the guide at new material buttons and solved it like this:
OutlinedButton.icon(
style: OutlinedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
).copyWith(
side: MaterialStateProperty.resolveWith<BorderSide>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) return null;
return BorderSide(
color: Theme.of(context).primaryColor,
width: 3,
);
// Defer to the widget's default.
},
),
),
...
I needed to specify a different color for a disabled vs active state because I wanted the border to have a color when its active and no color when its disabled (returning null because by default border has no color unlike the old button)

Answer 3

There were a few things I missed from looking at the docs within ButtonStyle.
I added
side: MaterialStateProperty.all<BorderSide>(
BorderSide(color: AppColors.Primary)),
in ButtonStyle and it worked rather than adding it inside
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
side: BorderSide(
style: BorderStyle.solid,
color: AppColors.Primary,
width: 1), // <-- this doesn't work at all in shape.
borderRadius: BorderRadius.all(Radius.circular(12)),
)),

Answer 4

Use style property:
OutlinedButton(
onPressed: () {},
child: Text('Button'),
style: OutlinedButton.styleFrom(
side: BorderSide(width: 1.0, color: Colors.red),
),
)