How to change OutlinedButton border color?

Question

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')
            ),
        ),
    );
  }
}

Coincidental

Answer 1

Use thestyle property:

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

Starch

Answer 2

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

Shrew

Answer 3

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: https://api.flutter.dev/flutter/material/ButtonStyle/backgroundColor.html

https://api.flutter.dev/flutter/material/MaterialButton/color.html

Spindry

This worked, Thanks! style: OutlinedButton.styleFrom(side: BorderSide(color: Colors.amber)), – Fendley

Answer 4

Style property will work

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

Infallibilism

'OutlineButton' is deprecated and shouldn't be used. Use OutlinedButton instead. – Cogon

Answer 5

Flutter's documentation says that you need to define both shape and side properties

Unlike TextButton or ElevatedButton, outline buttons have a default ButtonStyle.side which defines the appearance of the outline. Because the default side is non-null, it unconditionally overrides the shape's OutlinedBorder.side. In other words, to specify an outlined button's shape and the appearance of its outline, both the ButtonStyle.shape and ButtonStyle.side properties must be specified.

So, you need to pass

child: OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    side: const BorderSide(
      width: 5.0,
      color: Colors.blue,
    ),
  ),
  child: const Text('outline button'),
),

Gorcock

Answer 6

Theming

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

You can do this with ThemeData's outlinedButtonTheme:

   final color = ...;
   ThemeData(
    ...
    outlinedButtonTheme: OutlinedButtonThemeData(
        style: ButtonStyle(
          side: MaterialStateProperty.all(const BorderSide(color: color)),
          // surfaceTintColor: MaterialStateProperty.all(Colors.blue),
        )),
  );

Faubert

Answer 7

class OutlineButtonWidget extends StatelessWidget {

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

this could work

Hearthstone