In this article, we will introduce the amazing Flutter buttons that can help any beginner or professional design beautiful UI for modern applications.

First let me tell you one important thing about the Buttons in Flutter. In the latest version of Flutter, the following Buttons are deprecated in Fluter:

The abandoned Recommended alternatives
RaisedButton ElevatedButton
OutlineButton OutlinedButton
FlatButton TextButton

So let’s explore the buttons in Flutter.

Elevated Button

StadiumBorder

ElevatedButton(
  onPressed: (){},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
  shadowColor: Colors.green,
  shape: StadiumBorder(),
  padding: EdgeInsets.symmetric(horizontal: 35,vertical: 20)),
)
Copy the code

RoundedRectangleBorder

ElevatedButton(
  onPressed: (){},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
  shadowColor: Colors.green,
  shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(12),
      ),
   ),
),
Copy the code

CircleBorder

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)
Copy the code

BeveledRectangleBorder

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12)
    ),
  ),
)
Copy the code

Outlined Button

StadiumBorder 

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: StadiumBorder(),
  ),
)
Copy the code

RoundedRectangleBorder

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)
Copy the code

CircleBorder

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)
Copy the code

BeveledRectangleBorder

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)
Copy the code