6 June 2024 Leave a comment Tech-Help
When developing an Android app in Flutter, you might want to add a rounded button to your user interface. This guide will walk you through the most effective methods to achieve this, ensuring that your buttons not only look great but also conform to the latest Flutter standards.
Using ElevatedButton and TextButton
Since Flutter 2.0, the traditional FlatButton and RaisedButton widgets have been deprecated. Instead, you can use the ElevatedButton and TextButton widgets with the ButtonStyle property to create rounded buttons.
Creating a Rounded Button
To create a rounded button, you can use the shape property within the ButtonStyle of the ElevatedButton or TextButton. Here is an example:
ElevatedButton(
child: Text('Rounded Button'),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
),
onPressed: () => null,
),
Complete Example
Below is a complete example demonstrating how to use both ElevatedButton and TextButton with rounded corners:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
child: Text(
"Add to cart".toUpperCase(),
style: TextStyle(fontSize: 14),
),
style: ButtonStyle(
padding: MaterialStateProperty.all(EdgeInsets.all(15)),
foregroundColor: MaterialStateProperty.all(Colors.red),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
),
onPressed: () => null,
),
SizedBox(width: 10),
ElevatedButton(
child: Text(
"Buy now".toUpperCase(),
style: TextStyle(fontSize: 14),
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.white),
backgroundColor: MaterialStateProperty.all(Colors.red),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red),
),
),
),
onPressed: () => null,
),
],
)
Alternative Shapes and Styles
You can also use different shapes like StadiumBorder and CircleBorder with these buttons:
Using StadiumBorder
ElevatedButton(
onPressed: () {},
child: Text('Stadium Button'),
style: ElevatedButton.styleFrom(shape: StadiumBorder()),
),
Using CircleBorder
ElevatedButton(
onPressed: () {},
child: Text('Circle Button'),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(24),
),
),
Conclusion
Creating rounded buttons in Flutter is straightforward with the use of the ButtonStyle property in the ElevatedButton and TextButton widgets. By leveraging the shape property, you can achieve various designs that enhance your app’s user interface.
If you’re looking for an efficient way to test your mobile app’s UI, consider using Repeato. Repeato is a no-code test automation tool for iOS and Android that helps you create, run, and maintain automated tests for your apps quickly and easily. Its computer vision and AI capabilities allow you to focus on creating a great product while delegating test automation tasks to non-technical colleagues or QAs.
