CODEWITHSUNDEEP
flutterdart
John
John

Reputation: 993

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

Upvotes: 89

Views: 94446

Answers (7)

Adonias Dantas
Adonias Dantas

Reputation: 71

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

Upvotes: 7

Bickey kumar
Bickey kumar

Reputation: 11

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

Upvotes: 1

Ben Butterworth
Ben Butterworth

Reputation: 28482

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

Animation using Flutter hot reload to change border style

Upvotes: 2

maddy
maddy

Reputation: 4111

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

Upvotes: 10

CopsOnRoad
CopsOnRoad

Reputation: 267444

Use thestyle property:

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

Upvotes: 164

lava
lava

Reputation: 7343

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 enter image description here

Upvotes: 27

Shuaib Abubakker Bapputty Haji
Shuaib Abubakker Bapputty Haji

Reputation: 351

Style property will work

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

Upvotes: 9

Related Questions