Flutter: New Material Buttons, their Theme and Migrations.

As of Flutter v1.25.0–8.1.pre, flutter has done major changes for their material buttons and their themes. So Flat Button, Raised Button and Outline Button are now depricated and you can use Text Button, Elevated Button and Outlined Button in their places respectively. Lets just go through them individually and see how can we make and style buttons now.

1.Flat Button -> Text Button
So Flat button has been changed to Text button. By default Text button uses primarySwatch color for its text and splash color but flat button uses black color by default. Below you can see code to make a similar looking button using flat and text button class with text of red color.

//Flat button with red color text
FlatButton(
onPressed: () {},
child: Text('Flat Button'),
textColor: Colors.red,
),

//Text button with red color text
TextButton(
onPressed: () {},
child: Text('Text Button'),
style: TextButton.styleFrom(primary: Colors.red)
),

Flat Button and Text Button

2. Raised Button -> Elevated Button

So Raised button has been changed to Elevated button. Similar to text button, Elevated button too uses primarySwatch for its default background color. Below you can see code to make a similar looking button using raised and elevated button class with text of white color and orange background color with rounded border and an elevation of 4.0

//Raised Button 
RaisedButton(
onPressed: () {},
child: Text('Raised Button'),
color: Colors.orange,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
elevation: 4.0,
),

// Elevated Button
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
primary: Colors.orange,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
elevation: 4.0,
)),

Raised and Elevated Button

3. Outline Button -> Outlined Button

So Outline button has been changed to Outlined button. By default outlined button use primarySwatch color for the text. Below is the code for creating outline and outlined button with purple and rounded border with black text.

# Outline Button
OutlineButton(
onPressed: () {},
child: Text('Outline Button'),
borderSide: BorderSide(color: Colors.purple),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
)
# Outlined Button
OutlinedButton(
onPressed: () {},
child: Text('Outlined Button'),
style: OutlinedButton.styleFrom(
primary: Colors.black,
side: BorderSide(color: Colors.purple),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
)

Outline and Outlined Buttons

I hope you all have understood the basic differences and the changes flutter made into these material button. Flutter has also provided a migration guide which you can also use to migrate your old projects with new changes and features.

flutter.dev/go/material-button-migration-guide

The End,

By Daniyal Dolare.