How to create a FlatButton in Flutter

Question

Hi Guys,

I am new in Flutter. I want to create a FlatButton in my app. How can I do that?

Answer 1

Hi@akhtar,

A flat button is a text label displayed on a Material widget that reacts to touches by filling with color. The below example shows a FlatButton that is normally white-on-blue, with splashes rendered in a different shade of blue. It turns black-on-grey when disabled. The button has 8px of padding on each side, and the text is 20px high.

FlatButton(
  color: Colors.blue,
  textColor: Colors.white,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.black,
  padding: EdgeInsets.all(8.0),
  splashColor: Colors.blueAccent,
  onPressed: () {
    /*...*/
  },
  child: Text(
    "Flat Button",
    style: TextStyle(fontSize: 20.0),
  ),
)

To know more, join our Flutter Certification Course today.