The OutlinedButton is one of the widely used widgets in Flutter. The OutlinedButton was introduced with the release of Flutter v1.22 in October 2020. As it was released to solve the problems associated with the old Flutter buttons, the way of changing the color of the Outlined Button changed as well. So this tutorial, we’ll explore how to change outlined button color in Flutter with practical examples.
Here’s what we’ll cover:
- Change the Outlined Button Color in Flutter
- Changing the Text Color of the Outlined Button
- Change the Shadow Color of the Outlined Button
- Customize the Outlined Button Color for Disable State
- Changing the Outlined Button Border Color
- Managing Outlined Button Color at the App Level
Change the Outlined Button Color in Flutter
To change the Outlined Button color in Flutter, simply set the style property of Outlined Button from the OutlinedButton.styleFrom() static method and set the backgroundColor property to change background color and primary property to change the text color.
To change the outlined button background color:
Step 1: Add the OutlinedButton
widget.
Step 2: Add the style
parameter (inside OutlinedButton) and assign the OutlinedButton.styleFrom()
.
Step 3: Add the backgroundColor
parameter (inside OutlinedButton.styleFrom
) and assign any color.
Step 4: Run the App.
Code Example
OutlinedButton( style: OutlinedButton.styleFrom( backgroundColor: Colors.black, //<-- SEE HERE ), onPressed: () {}, child: const Text( 'Outlined Button', style: TextStyle(fontSize: 40), ), ),
Output

Also, see how to add color from hex. By using hex codes, you can easily create colors that match your brand or design vision.
Changing the Text Color of the Outlined Button
To change the text color of the outlined button, just assign the color of your choice to the primary
property.
Here are the steps:
- Add the
style
parameter (inside OutlinedButton) and assign theOutlinedButton.styleFrom()
. - Add the
primary
parameter (inside OutlinedButton.styleFrom) and assign any color. - Run the App.
Code Example
OutlinedButton( style: OutlinedButton.styleFrom( backgroundColor: Colors.black, primary: Colors.amberAccent, //<-- SEE HERE ), onPressed: () {}, child: const Text( 'Outlined Button', style: TextStyle(fontSize: 40), ), )
Output

Changing the Shadow Color of the Outlined Button
If you are designing your app to be fully compatible with your brand guidelines, then you may also want to change the shadow color of the Outlined Button. To change the shadow color, your button must be outlined first.
Let’s see how to change the shadow color:
- Inside the
Outlined
Button, add theelevation
property and set it to20
. - Now add the
shadowColor
property (Inside the Outlined Button) and set it to thecolor
you want as shadow color. - Run the App.
Code Example
OutlinedButton( style: OutlinedButton.styleFrom( backgroundColor: Colors.black, primary: Colors.amberAccent, elevation: 20, //<-- SEE HERE shadowColor: Colors.amber, //<-- SEE HERE ), onPressed: () {}, child: const Text( 'Outlined Button', style: TextStyle(fontSize: 40), ), )
Output

Customize the Outlined Button Color for Disable State
When the button is disabled, by default it shows a grey color. To change the disable color of the Outlined Button:
- Simply add the onSurface property inside the Outlined Button and set the appropriate color.
- Pass the null to onPressed property for testing the disable color.
Code Example
OutlinedButton( style: OutlinedButton.styleFrom( onSurface: Colors.amberAccent, //<-- SEE HERE ), onPressed: null, child: const Text( 'Outlined Button', style: TextStyle(fontSize: 40), ), )
Output

Changing the Outlined Button Border Color
To change the outline button border color, add the side property and assign the BorderSide widget with the color and width parameter.
Here are the steps to add outlined button border color:
- Add the
side
property, and set theBorderSide()
. - Inside the
BorderSide()
add thewidth
andcolor
property and assign the appropriate color.
Code Example
OutlinedButton( style: OutlinedButton.styleFrom( backgroundColor: Colors.black, primary: Colors.white, side: BorderSide(color: Colors.red, width: 5), //<-- SEE HERE ), onPressed: () {}, child: const Text( 'Outlined Button', style: TextStyle(fontSize: 40), ), )
Output

Managing Outlined Button Color at the App Level
Changing the color of every Outlined Button in your app is not a scalable solution. What if your app branding gets changed. Would you like to sit for long hours searching for all the button and replacing it with new colors? NO of course. Let’s see how you can set the theme of the Outlined Button at the app level. This will make all the Outlined Button in your app look the same and you can change them all instantly.
Here are the steps:
- Go to your
main.dart
file. - Inside the
MaterialApp
, find theThemeData
widget. - Add the
outlinedButtonTheme
property inside and assign theOutlinedButtonThemeData()
. - Add the
style
property and change the color as you would change it for normal OutlinedButton. - Place the OutlinedButton widget anywhere in your Flutter app and see.
Code Example
MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, outlinedButtonTheme: OutlinedButtonThemeData( style: OutlinedButton.styleFrom( primary: Colors.white, backgroundColor: Colors.black, ), ), ), home: ChangeOutlineButtonColorDemo(), );
That’s it. Thanks!
Conclusion
In this tutorial, we learned how to change outlined button color in Flutter. We also explored how to change the background and text color, shadow color, border color, disabled state color with practical examples. Finally, we learned the way to set colors for all the Outlined Button inside our app from a single place.
Would you like to check other interesting Flutter tutorials?