Different types of buttons you can use in your flutter 2.0+ project

Sometime as a flutter developer you will be confused which button should be added for your widget tree. I will list down the available button types. You can pick the preferred one.

Elevated Button

Flutter has deprecated the RaisedButton and Elevated button should be used as an alternative.

            ElevatedButton(
                child: Text(
                    "Buy now".toUpperCase(),
                    style: TextStyle(fontSize: 14, color: Colors.white)
                ),
                style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(20)),
                            side: BorderSide(color: Colors.blue)
                        )
                    )
                ),
                onPressed: () => null
            ),

Elevated Button with icon

OutlinedButton.icon(
              icon: Icon(Icons.call),
              label: Text("OutlinedButton"),
              onPressed: () => print("it's pressed"),
              style: ElevatedButton.styleFrom(
                side: BorderSide(width: 2.0, color: Colors.blue),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(32.0),
                ),
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              ),
            ),

TextButton

            TextButton(
                child: Text(
                    "Add to cart".toUpperCase(),
                    style: TextStyle(fontSize: 14, color: Colors.blue)
                ),
                style: ButtonStyle(
                    padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
                    foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(18.0),
                            side: BorderSide(color: Colors.blue)
                        )
                    )
                ),
                onPressed: () => null
            ),

Material Button

            MaterialButton(
              height: 58,
              minWidth: 240,
              shape: RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(12)),
              onPressed: () {},
              child: Text(
                "Material Button",
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.black,
                ),
              ),
              color: Colors.blue,
            ),

InkWell

You can use Inkwell widget as a button. Please check the flutter doc for more about Inkwell

            Material(
              child: InkWell(
                onTap: () => print('hello'),
                child: new Container(
                  width: 100.0,
                  height: 50.0,
                  decoration: new BoxDecoration(
                    color: Colors.blueAccent,
                    border: new Border.all(color: Colors.white, width: 2.0),
                    borderRadius: new BorderRadius.circular(10.0),
                  ),
                  child: Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
                ),
              ),
            )

There are some many button styles. I just mentioned few of them. I will update this page accordingly.

Thanks