[Flutter][86] TextButton dan TextButton.icon, Pengganti FlatButton (Deprecated Widget Part 2)

Tuesday, 23 Nov 2021 | By Riza

Image Load

Hello world, 

FlatButton adalah jenis button yang mungkin sering digunakan dalam sebuah aplikasi karena bentuknya yang hanya seperti text yang dapat dikllik sehingga lebih simple dan cocok untuk desain bertema flat design. Akan tetapi seberjalannya update flutter FlatButton mulai ditinggalkan dan digantikan dengan TextButton dan TextButton.icon. Pada postingan sebelumnya saya pernah menulis tentang penggunaan FlatButton yang memang sering sekali saya gunakan dalam membuat aplikasi. Akan tetapi pada update versi flutter ada beberapa perubahan dimana salah satunya adalah beberapa widget menjadi kadaluarsa dan harus diganti. 

Jika dalam aplikasi kita ada menggunakan FlatButton maka Flutter akan memberi keterangan bahwa widget telah kadaluarsa dan flutter merekomendasikan untuk mengganti dengan TextButton. Nah kali ini akan saya bahas mengenai bagaimana penggunaan TextButton dan perbedaannya dengan FlatButton. 

Untuk penggunaan sederhananya kira-kira seperti berikut.

TextButton(
   style: TextButton.styleFrom(
      textStyle: const TextStyle(fontSize: 20),
   ),
   onPressed: () {},
   child: const Text('klik'),
),



Lalu apa bedanya? untuk mengganti button Flatbutton ke TextButton kita hanya perlu mengganti penamaannya saja tanpa mengubah banyak pada propertinya. Perbedaan yang paling terlihat adalah adanya style. Dimana sekarang semua properi terkait style seperti color, shape, border dan lain-lain dimasukkan ke dalam TextButton.styleForm. 

Berikut properti lainnya

const TextButton(
  1. {Key? key,
  2. required VoidCallback? onPressed,
  3. VoidCallback? onLongPress,
  4. ButtonStyle? style,
  5. FocusNode? focusNode,
  6. bool autofocus = false,
  7. Clip clipBehavior = Clip.none,
  8. required Widget child}
)


Selanjutnya untuk TextButton.icon polanya sama dengan ElevatedButton.icon yaitu tinggal mengganti child menjadi icon dan label.

TextButton(
   style: TextButton.styleFrom(
      textStyle: const TextStyle(fontSize: 20),
   ),
   onPressed: () {},
   icon: Icon(Icons.people),
   label: const Text('klik'),
),


Berikut properti lainnya



TextButton.icon(
  1. {Key? key,
  2. required VoidCallback? onPressed,
  3. VoidCallback? onLongPress,
  4. ButtonStyle? style,
  5. FocusNode? focusNode,
  6. bool? autofocus,
  7. Clip? clipBehavior,
  8. required Widget icon,
  9. required Widget label}
)



Selamat mencoba :)