Change Outlined Button Color in Flutter (Ultimate Guide)

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 the OutlinedButton.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:

1. Inside the Outlined Button, add the elevation property and set it to 20.
2. Now add the shadowColor property (Inside the Outlined Button) and set it to the color you want as shadow color.
3. 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:

1. Simply add the onSurface property inside the Outlined Button and set the appropriate color.
2. 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:

1. Add the side property, and set the BorderSide().
2. Inside the BorderSide() add the width and color 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:

1. Go to your main.dart file.
2. Inside the MaterialApp, find the ThemeData widget.
3. Add the outlinedButtonTheme property inside and assign the OutlinedButtonThemeData().
4. Add the style property and change the color as you would change it for normal OutlinedButton.
5. 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?