CODEWITHSUNDEEP
flutterdart
nyphur
nyphur

Reputation: 2896

Cannot change border color in OutlinedButton

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.

Upvotes: 4

Views: 6969

Answers (5)

Mohammad Bilal Akbar
Mohammad Bilal Akbar

Reputation: 169

Use side property of OutlinedButton. Don't use it inside the shape property of OutlinedButton.


                              OutlinedButton(
                                onPressed: () {},
                                style: OutlinedButton.styleFrom(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10),
     // side: BorderSide(width:1.0, color: Colors.red), // DON'T USE HERE
                                  ),
                                  side: BorderSide(width:1.0, color: Colors.red),
                                  minimumSize: Size( width * 0.25, height * 0.04),
                                ),
                                child: Text('Decline', style: TextStyle(color: Colors.red),),
                              ),

Upvotes: 0

kksal55
kksal55

Reputation: 598

Use style property:

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

enter image description here

Upvotes: 6

code4food
code4food

Reputation: 133

This works for me:

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

Upvotes: 9

Calvin Gonsalves
Calvin Gonsalves

Reputation: 2030

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)

Upvotes: 7

nyphur
nyphur

Reputation: 2896

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

Upvotes: 3

Related Questions