FlutterGallery

Button

Flutter offers a variety of Button Widgets.
Here are some basic instructions for using the buttons provided by Flutter.

Basic Usage

  • TextButton
  • OutlinedButton
  • ElevatedButton

There are three types of buttons provided by default from Flutter as described above.
The Button Widget detects a click and can prompt an action from the user.

TextButton(
  onPressed: () {},
  child: const Text("TextButton"),
),
OutlinedButton(
  onPressed: () {},
  child: const Text("OutlinedButton"),
),
ElevatedButton(
  onPressed: () {},
  child: const Text("ElevatedButton"),
),

TextButton Widget

TextButton can be styled with TextButton.styleFrom().
It can also be disabled by setting onPressed to NULL.

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.orange[900],
  ),
  child: const Text(
    "Warning",
  ),
),

OutlinedButton Widget

OutlinedButton is designed not to change the outline color by default.
If you wish to change it, you can use the side ofOutlinedButton.styleForm.

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    side: const BorderSide(width: 1, color: Colors.orange),
    foregroundColor: Colors.orange[900],
  ),
  child: const Text(
    "Warning",
  ),
),

ElevatedButton Widget

ElevatedButton has a strong tint and is best used with actions of high importance.

ElevatedButton(
  style: ElevatedButton.styleFrom(
      backgroundColor: Colors.orange,
      foregroundColor: Colors.orange[900]),
  onPressed: () {},
  child: const Text(
    "Warning",
    style: TextStyle(color: Colors.white),
  ),
),

Change Size

If you want to change the size of the buttons, changing fontSize is useful.
If you want to change the size of the button without changing the font size, you can change the value of EdgeInsets.symmetric to accommodate this.

ElevatedButton(
  style: ElevatedButton.styleFrom(
      textStyle: const TextStyle(fontSize: 30),
      padding: const EdgeInsets.symmetric(
          vertical: 16, horizontal: 20)),
  onPressed: () {},
  child: const Text("Large"),
),

Button with icon

To make it easier to understand the meaning of a button, it is useful to add an icon.
TextButton, OutlinedButton, and ElevatedButton can all be labeled with icons.

ElevatedButton.icon(
  onPressed: () {},
  icon: const Icon(
    Icons.download,
    size: 16,
  ),
  label: const Text('Download'),
),

API

For further information, please refer to the official documentation below.

Next