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'),
      ),
    ),
  ),
)