New Flutter Material Buttons — Flutter Buttons 2.0

As we all know with the release of Flutter 2.0, previously used FlatButton and RaisedButton have been deprecated.

So now instead we can use TextButton, ElevatedButton, and OutlinedButton, so let's have a look at these below how we can style and use them in our app.

Flutter Buttons 2.0

First, let's see how the above-mentioned buttons look with no custom styling applied.

TextButton(
  onPressed: () {},
  child: Body(
    "Text Button",
  ),
),
ElevatedButton(
  onPressed: () {},
  child: Body(
    "Elevated Button",
  ),
),
OutlinedButton(
  onPressed: () {},
  child: Body(
    "Outlined Button",
  ),
),

TextButton, ElevatedButton, and OutlinedButton with default styling.

Let's add few more style elements.

backgroundColor: Color(0XFF8BC34A),
primary: Colors.white,
minimumSize: Size(240, 100),
elevation: 8,
shadowColor: Color(0XFF8BC34A).withOpacity(0.5),
side: BorderSide(width: 2, color: Colors.orange),
shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(10))

If in case we need to add the disabled color to our button, we can do the same by using the onSurface property.

onSurface: Color(0XFF8BC34A), //comes with 30% opacity.

Like and Share if you found it useful.