8. Flutter - Buttons & Icons
Icons widget:
Icon() // widget
Icons.ICONNAME // property of Icon() widget. Replace ICONNAME with icon
// get icons from https://api.flutter.dev/flutter/material/Icons-class.html
Icons common properties:
Icons.ICONNAME
color
size
Icons example:
body: Center(
child: Icon(
Icons.airport_shuttle,
color: Colors.lightBlue,
size: 50,
),
),
Button Widget Types:
- RaisedButton() // has shadow
- FlatButton() // has no shadow
Button Common Properties:
onPressed: () {} // required property. A function when button is pressed.
child: Text()
color: Colors.COLORNAME
Text Buttons with Icons (separate widgets from button widget):
- RaisedButton.icon()
- FlatButton.icon()
// requires " onPressed: () {} " property
// change icon with " icon: Icons() " property and widget
// change the text associated with the icon with " label: Text('TEXT') " property and widget
Example Button+Icon Combo:
body: Center(
child: FlatButton.icon(
onPressed: () {},
icon: Icon(
Icons.mail,
),
label: Text("PRESS ME"),
color: Colors.lightBlue,
),
),
Non-Text Icon Button Widgets:
- IconButton() // widget
// requires " onPressed: () {} " property
// change icon with " icon: Icons() " property and widget
// change size with " iconSize: 50 " property
Example:
body: Center(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.mail,
),
color: Colors.lightBlue,
iconSize: 50,
),
),
Comments
Post a Comment