How to Create Rounded Button in Flutter

A rounded button is a type of button that has a curved or round shape. This type of button is often used in mobile apps to create a softer and more inviting look and feel.

Do you want to create a rounded button in Flutter? It’s actually pretty easy! We have some snippets to create them.

SizedBox(
  width: 240,
  child: TextButton(
      child: const Text('Rounded Text Button'),
      style: ButtonStyle(
          padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(16.0)),
          foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0), side: const BorderSide(color: Colors.blue)))),
      onPressed: () {}),
)
SizedBox(
  width: 240,
  child: ElevatedButton(
      child: const Text('Rounded Elevated Button'),
      style: ButtonStyle(
          padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(16.0)),
          backgroundColor: MaterialStateProperty.all<Color>(Colors.orange),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0), side: const BorderSide(color: Colors.orange)))),
      onPressed: () {}),
)
SizedBox(
  width: 240,
  child: Material(
    color: Colors.green,
    borderRadius: BorderRadius.circular(16.0),
    child: InkWell(
      hoverColor: Colors.greenAccent,
      splashColor: Colors.lightGreen,
      focusColor: Colors.lightGreen,
      highlightColor: Colors.blueGrey,
      onTap: () {},
      borderRadius: BorderRadius.circular(20),
      child: Container(
        width: 240,
        height: 32,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16.0),
        ),
        alignment: Alignment.center,
        child: const Text('Material Button'),
      ),
    ),
  ),
)

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close