Cannot change border color in OutlinedButton

user_4126418 0
Viewed 2427

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.

dart flutter
4 Answers

This works for me:

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

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)

user_126687270

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

Use style property:

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

enter image description here

user_38426920
Related