Image Load

Hello world,

Melanjutkan dari part sebelumnya yaitu beberapa bentuk material button yang ada pada Flutter, kali ini ada empat button lagi yang akan saya bahas yaitu ButtonBar, DropdownButton, FloatingActionButton, PopupMenuButton. Keempat button tersebut berbeda dari part sebelumnya karena memiliki efek dan opsi ketika diklik. Langsung saja masuk ke button pertama.

1. ButtonBar

ButtonBar digunakan  untuk mengatur atau menyusun button secara horizontal seperti penggunaan Row.


Cara penggunaan

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

Dan berikut ini attribute lain yang dapat digunakan pada ButtonBar.

const ButtonBar(
{Key key,
MainAxisAlignment alignment,
MainAxisSize mainAxisSize,
ButtonTextTheme buttonTextTheme,
double buttonMinWidth,
double buttonHeight,
EdgeInsetsGeometry buttonPadding,
bool buttonAlignedDropdown,
ButtonBarLayoutBehavior layoutBehavior,
VerticalDirection overflowDirection,
double overflowButtonSpacing,
List<Widget> children: const []}
)


2. DropdownButton

Seperti namanya, DropdownButton dipakai untuk membuat dropdown pada tombol.



Cara penggunaan akan saya bahas pada postingan terpisah.

Berikut attribute yang  dapat digunakan pada DropdownButton

DropdownButton<T>(
{Key key,
@required List<DropdownMenuItem<T>> items,
DropdownButtonBuilder selectedItemBuilder,
T value,
Widget hint,
Widget disabledHint,
@required ValueChanged<T> onChanged,
VoidCallback onTap,
int elevation: 8,
TextStyle style,
Widget underline,
Widget icon,
Color iconDisabledColor,
Color iconEnabledColor,
double iconSize: 24.0,
bool isDense: false,
bool isExpanded: false,
double itemHeight: kMinInteractiveDimension,
Color focusColor,
FocusNode focusNode,
bool autofocus: false,
Color dropdownColor}
)


3. FloatingActionButton

Button tipe ini biasanya digunakan untuk membuat tombol shortcut untuk melakukan suatu proses dimana posisi button ini fixed di kanan bawah meski halaman kita scroll ke bawah. Untuk yang saya masukkan kali ini adalah versi Extended. Untuk lebih lengkapnya akan saya buat post tersendiri.



Cara penggunaan


class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Floating Action Button Label'),
),
body: Center(
child: const Text('Press the button with a label below!'),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
// Add your onPressed code here!
},
label: Text('Approve'),
icon: Icon(Icons.thumb_up),
backgroundColor: Colors.pink,
),

);
}
}

Berikut attribute yang dapat digunakan pada FloatingActionButton.extended

FloatingActionButton.extended(
{Key key,
String tooltip,
Color foregroundColor,
Color backgroundColor,
Color focusColor,
Color hoverColor,
Object heroTag: const _DefaultHeroTag(),
double elevation,
double focusElevation,
double hoverElevation,
Color splashColor,
double highlightElevation,
double disabledElevation,
@required VoidCallback onPressed,
ShapeBorder shape,
bool isExtended: true,
MaterialTapTargetSize materialTapTargetSize,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
Widget icon,
@required Widget label}
)


4. PopupMenuButton

PopupMenuButton memunyai bentuk dan fungsi yang hampir sama dengan DropdownButton. Perbedaannya ada pada proses yang dilakukan saat button dipilih. Dropdown akan langsung menjalankan onPressed ketika dipilih sedangakn PopupMenuButton akan menjalankan onPressed setelah PopupMenuButton tertutup. Jika samakan dengan HTML maka PopupMenuButton adalah tag select dengan proses onChange.

Cara penggunaan akan saya buat di post yang terpisah.

Berikut attribute yang dapat digunakan pada PopupMenuButon.

const PopupMenuButton<T>(
{Key key,
@required PopupMenuItemBuilder<T> itemBuilder,
T initialValue,
PopupMenuItemSelected<T> onSelected,
PopupMenuCanceled onCanceled,
String tooltip,
double elevation,
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
Widget child,
Widget icon,
Offset offset: Offset.zero,
bool enabled: true,
ShapeBorder shape,
Color color,
bool captureInheritedThemes: true}
)


Selamat mencoba :)