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

Popular posts from this blog

2. FreeCodeCamp - Dynamic Programming - Learn to Solve Algorithmic Problems & Coding Challenges

20. Data Analytics - Analyze Data to Answer Questions - Week 1

3. Algorithms - Selection Sort