MOCKSTACKS
EN
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.

BackButton


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

CloseButton


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.

FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.save),
label: Text("Save"),
)

Flashes when clicked on.

Enabling


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

OutlineButton(
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.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: const HomeWidget(),
);
}
}
class HomeWidget extends StatelessWidget {
const HomeWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
Row flatButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
onPressed: () => debugPrint('FlatButton pressed'),
child: Text('FlatButton')),
const Text("FlatButton")
]);
Row raisedButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: () => debugPrint('RaisedButton pressed'),
child: Text('RaisedButton')),
const Text("RaisedButton")
]);
Row iconButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () => debugPrint('IconButton pressed')),
const Text("IconButton")
]);
Row outlineButtonRow = Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
OutlineButton(
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),
);
}).toList(),
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>[
flatButtonRow,
raisedButtonRow,
iconButtonRow,
outlineButtonRow,
dropdownButtonRow,
backButtonRow,
closeButtonRow,
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => debugPrint('FloatingActionButton pressed'),
child: const Text("F.A.B")),
);
}
}



Conclusion

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: mockstacks@gmail.com.


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 Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.