How to Change Background Color Size Border Radius of Elevated Button in Flutter
Introduction
Elevated buttons in Flutter are a type of button that has a shadow and a filled background color. They are often used to create Calls-to-Action (CTAs) that stand out from the rest of the UI. However, the default appearance of elevated buttons may not always fit the design requirements of an app. In this article, we will explore how to change the background color, size, and border radius of an elevated button in Flutter.
Customizing Background Color
To change the background color of an elevated button, you can use the `style` property and set the `backgroundColor` property. Here is an example:
“`dart
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {},
child: Text(‘Click Me’),
)
“`
In this example, the background color of the elevated button is set to red.
Customizing Size
To change the size of an elevated button, you can use the `style` property and set the `minimumSize` property. Here is an example:
“`dart
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size(100, 50),
),
onPressed: () {},
child: Text(‘Click Me’),
)
“`
In this example, the minimum size of the elevated button is set to 100×50 pixels.
Customizing Border Radius
To change the border radius of an elevated button, you can use the `style` property and set the `shape` property. Here is an example:
“`dart
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: StadiumBorder(),
),
onPressed: () {},
child: Text(‘Click Me’),
)
“`
In this example, the border radius of the elevated button is set to a stadium shape, which is a shape with a rounded rectangle.
Combining Customizations
You can combine the above customizations to create a button with a custom background color, size, and border radius. Here is an example:
“`dart
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
minimumSize: Size(100, 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
onPressed: () {},
child: Text(‘Click Me’),
)
“`
In this example, the elevated button has a red background color, a minimum size of 100×50 pixels, and a border radius of 10 pixels.
Conclusion
In this article, we have seen how to change the background color, size, and border radius of an elevated button in Flutter. We have also seen how to combine these customizations to create a button with a custom appearance.
FAQ
1. How do I change the text color of an elevated button?
You can change the text color of an elevated button by using the `style` property and setting the ` textStyle` property.
2. Can I use a custom font for the text of an elevated button?
Yes, you can use a custom font for the text of an elevated button by using the `style` property and setting the `textStyle` property.
3. How do I add a padding to an elevated button?
You can add a padding to an elevated button by using the `style` property and setting the `padding` property.
4. Can I use an image as the background of an elevated button?
Yes, you can use an image as the background of an elevated button by using the `style` property and setting the `backgroundImage` property.
5. How do I disable an elevated button?
You can disable an elevated button by setting the `onPressed` property to null.
