Image Load

Hello world,

Ada beberapa jenis button yang tersedia pada Flutter yang dapat kita gunakan. Contohnya sebelumnya saya menulis tentang cupertino button yang desainnya untuk IOS. Kali ini button yang akan kita bahas adalah tipe-tipe button yang memiliki desain material. Langsung saja kita masuk ke tipe button yang pertama.

1. RaisedButton

Ini adalah tipe button yang paling sering saya gunakan karena bentuknya yang seperti button standar.


Cara penggunaan:

RaisedButton(
onPressed: () {},
child: Text('Enabled Button', style: TextStyle(fontSize: 20)),
),

Dan berikut ini attribute lain yang dapat digunakan pada RaisedButton.

RaisedButton(
{Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
double elevation,
double focusElevation,
double hoverElevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
Widget child}
)


2. FlatButton

Flat button adalah button dengan bentuk sederhana yang tidak memiliki shadow pada tepi tombolnya atau biasa disebut flat desain. Pada bentuk defaultnya flat button tidak memiliki background jd akan terlihat seperti text yang dapat diklik. Namun dengan beberapa attribut tambahan akan membentuk button sesuai keinginan.



Cara penggunaan:

FlatButton(
  onPressed: () { },
  child: Text(
    "Flat Button",
  ),
)


Dan berikut ini attribute lain yang dapat digunakan pada FlatButton.

 FlatButton(
{Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
MaterialTapTargetSize materialTapTargetSize,
@required Widget child}
)


3. OutlineButton

Outline button memiliki bentuk seperti Flatbutton akan tetapi memiliki garis tepi atau border pada semua sisi tombol.


Cara penggunaan:

OutlineButton(
  onPressed: () { },
  child: Text(
    "Outline Button",
  ),
)


Dan berikut ini attribute lain yang dapat digunakan pada OutlineButton.

OutlineButton(
{Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
double highlightElevation,
BorderSide borderSide,
Color disabledBorderColor,
Color highlightedBorderColor,
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
Widget child}
)


4. IconButton

Icon button adalah tombol yang dibuat khusus untuk membuat tombol berbentuk widget Icon.



Cara  penggunaan:

IconButton(
    icon: Icon(Icons.home),
    tooltip: 'Icon Button',
    onPressed: () {},
),

Dan berikut ini attribute lain yang dapat digunakan pada OutlineButton.

IconButton(
{Key key,
double iconSize: 24.0,
VisualDensity visualDensity,
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
AlignmentGeometry alignment: Alignment.center,
@required Widget icon,
Color color,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Color disabledColor,
@required VoidCallback onPressed,
FocusNode focusNode,
bool autofocus: false,
String tooltip,
bool enableFeedback: true,
BoxConstraints constraints}

)


Selamat mencoba :)