Flutter ElevatedButton shape – rectangle

September 27, 2022

This should be the easiest one ever.

I am coming back to flutter after years away as I am forced to update my old app. Everything has changed!

I am trying to make an ElevatedButton that is square. The default has slightly rounded edges that looks weird when I am making a button the width of the screen.

All I want to know is how I can make this button a square. That’s it! No tricks!

ElevatedButton has:

ElevatedButton.styleFrom(
    shape:  ???,
),

But I can’t find any information anywhere online what my options are for shape. Only a few examples on how to make it round or beveled or literally every other shape you can think of except for a simple rectangle 😀

>Solution :

Try below code:

ElevatedButton, ButtonStyle, BorderRadius

ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
      //borderRadius: BorderRadius.zero, //Rectangular border
    ),
  ),
  onPressed: () {},
  child: const Text(
    'Submit',
  ),
),

Result->