Questions And Answers

More Tutorials

Flutter Buttons

Flutter offers a bunch of different button widgets:

FlatButton - material

Useful for buttons that don’t need a border, for example those that are already in a toolbar or menu (something that provides a ui context).
Flashes background when clicked on.

RaisedButton - Material

Useful if you want a button made more visible in a ‘sea of content’.
Flashes shadow when clicked on.

IconButton - material

Flashes background circle when clicked on.

OutlineButton - material

A bordered button whose elevation increases and whose background becomes opaque when the button is pressed.
Flashes background and border when clicked on.

DropdownButton - material

Used for selecting from a list of items Shows menu when clicked on.
You can supply existing value as constructor argument.


An IconButton setup for use as a back button.
Flashes background circle when clicked on.


An IconButton setup for use as a close button to close modals (or any other closeable content).
Flashes background circle when clicked on.

FloatingActionButton - material

A button that hovers in a layer above content.
Advisable that you only ever use one at a time.
You can change background and foreground colors.
You can use the ‘extended’ named constructor to make a larger, wider Floating Action Button.

onPressed: () {},
icon: Icon(,
label: Text("Save"),

Flashes when clicked on.


You can enable or disable buttons using the ‘onPressed’ constructor
Setting it to null disables the button, otherwise it is enabled.
The code below uses a ternary operator for this.

onPressed: _enabled ? _onPressed : null,
child: const Text('Register'),

Example – ‘buttons’

This app displays different types of buttons so you can see what they look like.

Source Code

import 'package:flutter/material.dart';
void main() => runApp(new ButtonApp());
class ButtonApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
home: const HomeWidget(),
class HomeWidget extends StatelessWidget {
const HomeWidget({Key key}) : super(key: key);
Widget build(BuildContext context) {
Row flatButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
onPressed: () => debugPrint('FlatButton pressed'),
child: Text('FlatButton')),
const Text("FlatButton")
Row raisedButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
onPressed: () => debugPrint('RaisedButton pressed'),
child: Text('RaisedButton')),
const Text("RaisedButton")
Row iconButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
icon: Icon(Icons.add),
onPressed: () => debugPrint('IconButton pressed')),
const Text("IconButton")
Row outlineButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
onPressed: () => debugPrint('OutlineButton pressed'),
child: Text("OutlineButton")),
const Text("OutlineButton")
Row dropdownButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new DropdownButton<String>(
items: <String>['Mens', 'Womans'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: Text(value),
onChanged: (value) => debugPrint('Changed: ${value}')),
const Text("DropdownButton")
Row backButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[BackButton(), const Text("BackButton")]);
Row closeButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[CloseButton(), const Text("CloseButton")]);
return new Scaffold(
appBar: new AppBar(
title: const Text("Buttons"),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
floatingActionButton: FloatingActionButton(
onPressed: () => debugPrint('FloatingActionButton pressed'),
child: const Text("F.A.B")),


In this page (written and validated by ) you learned about Flutter Buttons . What's Next? If you are interested in completing Flutter tutorial, your next topic will be learning about: Flutter Multi Child Layout Widgets.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.