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

Solution 1:^[1]

Use thestyle property:

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

Solution 2:^[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

Solution 3:^[3]

Style property will work

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

Solution 4:^[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nick stands with Ukraine
Solution 2
Solution 3	Shuaib Abubakker Bapputty Haji
Solution 4

'How to change OutlinedButton border color?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]