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")),
);
}
}