ElevatedButton Explained | Flutter for Android Developers

What’s ElevatedButton?

A Material Design ‘elevated button’. Use elevated buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces.

Check the official documentation for more.

ElevatedButton explained for Android Developers

An elevated button is a label displayed on a Material widget whose elevation increases when the button is pressed. The label’s Text and Icon widgets are displayed in style’s ButtonStyle.foregroundColor and the button’s filled background is the ButtonStyle.backgroundColor. This is similar to how buttons in Android can have different states, such as pressed or disabled, and can be styled using XML attributes or programmatically in Kotlin.

Example Code

Here is an example of how to use ElevatedButton:

const ElevatedButton(
  onPressed: null,
  child: Text('Disabled'),
);

const ElevatedButton(
  onPressed: () {},
  child: Text('Enabled'),
);

ElevatedButton Remarks

Avoid using elevated buttons on already-elevated content such as dialogs or cards.