How to change the color of common buttons in Flutter
Changing the way buttons look is a common task in mobile development. In Flutter, you can easily change button colors using different methods. In this post, we will go over how to change the color of commonly used buttons in Flutter. This way, you can create buttons that match your application's style.
ElevatedButton
To change the color of the ElevatedButton, we can use the static ElevatedButton.styleFrom() function. Here is an example:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
minimumSize: Size(200, 50),
),
child: Text(
'Elevated Button',
style: TextStyle(fontSize: 22),
),
),
In this code snippet, we created an ElevatedButton with a green background by using the static ElevatedButton.styleFrom() function and setting the backgroundColor property to the desired color. The button's size was increased for demonstration purposes in the GIF below, but it is not necessary to change the color. The text inside the button reads "Elevated Button," and the font size is set to 22.
IconButton
Unfortunately, the same approach used for ElevatedButton does not work for IconButton. Although IconButton has a style property and the IconButton.styleFrom function exists, setting the background color inside the function will not change the button's background color. For the IconButton, we need to use different methods to customize its appearance.
Ink widget
For the recommended approach, we use the Ink widget to wrap the IconButton and set the background color. Here is how:
Ink(
decoration: const ShapeDecoration(
color: Colors.green,
shape: CircleBorder(),
),
child: IconButton(
iconSize: 80,
splashRadius: 50,
onPressed: () {},
icon: Icon(Icons.add, color: Colors.white),
),
),
By setting the color property of the Ink widget to green and using a CircleBorder() as the shape decoration, we achieve a green-colored circular background for the IconButton. The icon displayed inside the button is the "add" icon from Icons.add, with a white color. You can use the splashRadius property to control the size of the color that is shown when the button is clicked.
CircleAvatar widget
Another approach to change the color of the IconButton is by using the CircleAvatar widget, which allows us to create circular containers with custom colors.
However, it is important to note that using this approach causes us to lose the default splash effect of the IconButton. Nonetheless, this approach can be used as an alternative if needed. Here is an example:
CircleAvatar(
radius: 50,
backgroundColor: Colors.green,
child: IconButton(
iconSize: 50,
onPressed: () {},
icon: Icon(Icons.add, color: Colors.white),
),
),
In this code snippet, we use the CircleAvatar widget to create a circular container with a green background color by setting itsbackgroundColor property. We also increased its size by setting the Radius property to 50. Inside the CircleAvatar widget, we place the IconButton with the "add" icon and a white color. To match the size of the CircleAvatar we increase the size of the IconButton by also setting the iconSize to 50.
Material 3
Material 3 in Flutter is an evolution of the Material Design framework, introducing new features and enhancements. With Material 3, Flutter added additional constructors to the IconButton, such as IconButton.filled, which creates a filled button.
To use Material 3 for customizing button colors, you need to enable it in the theme. Let us go over an example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorSchemeSeed: Colors.blue,
useMaterial3: true,
),
title: 'Change Button Color demo',
home: Scaffold(
appBar: AppBar(
title: Text('Change Button Color demo'),
),
body: Center(
child: IconButton.filled(
onPressed: () {},
iconSize: 50,
icon: Icon(
Icons.add,
color: Colors.white,
),
),
),
),
);
}
}
In this code snippet, we turned on Material 3 by setting useMaterial3: true in the theme of the MaterialApp widget. We created a filled button using the IconButton.filled() constructor, which takes its color from the application's theme. We changed the theme color by setting the colorSchemeSeed to Colors.blue. However, as you can see the button color is not the blue color you would expect.
Using Material 3 to set the background color of the IconButton is a straightforward way to change its color without wrapping it with other widgets. However, as demonstrated using Material 3 introduces other challenges, so it is essential to consider your application's requirements before using it. If you plan to use Material 3 in your application, then using IconButton.filled() to set the button's color is definitely the way to go.
OutlinedButton
For the OutlinedButton widget, we can apply the same approach as with ElevatedButton by using the OutlinedButton.styleFrom() method. Here is an example:
OutlinedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
minimumSize: Size(200, 50),
),
child: Text(
'Outlined Button',
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
Similar to the ElevatedButton, we customize the OutlinedButton using the OutlinedButton.styleFrom() method. Setting the background color to green, we create an outlined button with green borders and white text "Outlined Button" with a font size of 22.
Conclusion
In this post, we looked at different methods to change the color of common buttons. For the ElevatedButton, we used ElevatedButton.styleFrom() to change the background color. For the IconButton, we explored options like using the Ink widget or CircleAvatar to adjust the color. We also discovered how to create a filled colored button using Material 3 and the IconButton.filled constructor. Lastly, we learned to change the background color of the OutlinedButton using the OutlinedButton.styleFrom() method. With these techniques, you can easily create attractive buttons that match your application's design in Flutter.
