Published - Wed, 25 Jan 2023

Macam Macam Widgets Flutter

Macam Macam Widgets Flutter

WIDGETS

Widgets Flutter adalah komponen visual yang digunakan dalam aplikasi Flutter untuk menampilkan dan mengatur tampilan. Widgets ini dapat digunakan untuk membuat layout, menambahkan interaksi, dan lain-lain. Widget Flutter dapat dikombinasikan dengan widget lainnya untuk membuat tampilan yang lebih kompleks.

MACAM MACAM WIDGETS

Ada berbagai macam widget yang tersedia di Flutter, diantaranya:

Container: digunakan untuk menampung widget lain dan memberikan gaya seperti ukuran, posisi, margin, dan padding.
Row and Column: digunakan untuk mengatur posisi widget dalam baris atau kolom.
Text: digunakan untuk menampilkan teks dengan berbagai jenis font, ukuran, dan gaya.
Image: digunakan untuk menampilkan gambar dari file atau sumber internet.
Button: digunakan untuk menambahkan tombol interaktif dengan berbagai gaya.
Input: digunakan untuk menambahkan elemen input seperti text field dan checkbox.
ListView: digunakan untuk menampilkan daftar item dengan scroll.
Stack: digunakan untuk menumpuk widget satu di atas yang lain.
Expanded: digunakan untuk mengatur ukuran widget sesuai dengan ruang yang tersedia.
StreamBuilder: digunakan untuk membuat widget yang memantau stream dan mengubah tampilan sesuai dengan perubahan data.

Itu hanya beberapa contoh widget yang tersedia di Flutter, masih ada banyak lagi yang dapat digunakan untuk membuat aplikasi yang interaktif dan menarik.

CONATAINER

Sintaks dasar untuk menggunakan widget Container di Flutter adalah sebagai berikut:

Container(
  width: double,
  height: double,
  margin: EdgeInsets,
  padding: EdgeInsets,
  decoration: BoxDecoration,
  child: Widget,
)

width dan height digunakan untuk mengatur ukuran container.
margin digunakan untuk menambahkan margin di luar container.
padding digunakan untuk menambahkan padding di dalam container.
decoration digunakan untuk memberikan gaya seperti warna latar, gradien, atau bingkai.
child digunakan untuk menambahkan widget yang akan ditampung oleh container.

Contoh:

Container(
  width: 200,
  height: 200,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10)
  ),
  child: Text("Hello World"),
)

Container diatas akan menampilkan sebuah teks "Hello World" dalam lingkaran biru dengan margin 10 dan padding 20.

Perlu diingat bahwa setiap property/field yang dituliskan dalam sintaks diatas tidak harus diisi semua, sesuai kebutuhan aplikasi kita.

Comments (0)

Search

Popular categories

Flutter

Tutorial framework Flutter Bahasa Indonesia

Framework7

Tutorial Framework7 Bahasa Indonesia All categories

Latest blogs

Flutter Widget ListTile

Flutter Widget ListTile

WIDGET LISTTILEadalah sebuah widget yang digunakan dalam pengembangan aplikasi mobile (seperti Flutter atau Android) untuk membuat sebuah elemen list tile. ListTile biasanya digunakan sebagai bagian dari sebuah daftar (list) yang memuat informasi tertentu, seperti judul, deskripsi, atau gambar. Widget ListTile memungkinkan pengembang aplikasi untuk membuat list tile yang bisa dikustomisasi sesuai dengan kebutuhan aplikasi dan memberikan interaksi yang baik bagi pengguna.PROPERTIBerikut adalah beberapa properti umum yang tersedia pada widget ListTile dalam Flutter:title: menentukan teks yang ditampilkan sebagai judul list tile.subtitle: menentukan teks yang ditampilkan sebagai subjudul list tile.leading: menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kiri list tile.trailing: menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kanan list tile.isThreeLine: menentukan apakah list tile harus memiliki subjudul (subtitle) atau tidak. Nilai default-nya adalah false.dense: menentukan apakah list tile harus memiliki jarak yang lebih rendah atau tidak. Nilai default-nya adalah false.enabled: menentukan apakah list tile bisa diklik atau tidak. Nilai default-nya adalah true.selected: menentukan apakah list tile harus ditandai sebagai dipilih atau tidak. Nilai default-nya adalah false.onTap: menentukan aksi yang akan dilakukan ketika list tile diklik.onLongPress: menentukan aksi yang akan dilakukan ketika list tile ditekan lama.EXAMPLEBerikut adalah contoh sintaks widget ListTile dalam Flutter:ListTile( title: Text('Judul'), subtitle: Text('Subjudul'), leading: Icon(Icons.person), trailing: Icon(Icons.arrow_forward), onTap: () { // aksi ketika list tile diklik }, ) title: digunakan untuk menentukan teks yang ditampilkan sebagai judul list tile.subtitle: digunakan untuk menentukan teks yang ditampilkan sebagai subjudul list tile.leading: digunakan untuk menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kiri list tile.trailing: digunakan untuk menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kanan list tile.onTap: digunakan untuk menentukan aksi yang akan dilakukan ketika list tile diklik.Contoh di atas hanya sebagai contoh sintaks dasar dari widget ListTile. Kita bisa menambahkan atau mengubah properti lain sesuai dengan kebutuhan aplikasi yang kita kerjakan.

Thu, 02 Feb 2023

Flutter Widget Dialog

Flutter Widget Dialog

WIDGET DIALOGAdalah salah satu widget built-in dalam Flutter yang digunakan untuk menampilkan pesan modal ke pengguna. Dialog biasanya digunakan untuk menampilkan informasi penting, meminta konfirmasi dari pengguna, atau meminta masukan dari pengguna. Dalam Flutter, beberapa contoh dialog built-in meliputi AlertDialog, SimpleDialog, dan BottomSheet.PROPERTIBerikut adalah beberapa properti yang sering digunakan dalam widget Dialog dalam Flutter:title: Judul dari dialog.content: Isi dari dialog, biasanya berupa widget Text atau beberapa widget lain.actions: Tombol yang dapat ditemukan di bagian bawah dialog.backgroundColor: Warna latar belakang dari dialog.elevation: Tinggi bayangan yang ditampilkan di bawah dialog.semanticLabel: Label semantik yang dapat digunakan oleh perangkat bantuan aksesibilitas.shape: Bentuk dari dialog, biasanya menggunakan RoundedRectangleBorder.Ini hanya beberapa contoh properti yang sering digunakan dalam widget Dialog dalam Flutter. Ada beberapa properti lain yang dapat digunakan sesuai dengan kebutuhan pengembang aplikasi.EXAMPLEBerikut adalah sintaks umum untuk membuat Dialog widget dalam Flutter:showDialogshowDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text("Judul Dialog"), content: Text("Isi dari Dialog"), actions: <Widget>[ FlatButton( child: Text("Tutup"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan Dialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek AlertDialog dengan properti title, content, dan actions. Kita juga menambahkan tombol tutup yang dapat ditemukan pada bagian bawah Dialog. Saat pengguna menekan tombol tutup, kita memanggil Navigator.of(context).pop() untuk menutup Dialog.Ini hanya contoh sintaks umum untuk membuat Dialog widget dalam Flutter. Ada beberapa variasi lain dari Dialog widget seperti SimpleDialog, BottomSheet, dll. yang dapat dibuat dengan sintaks yang berbeda.SimpleDialogBerikut adalah sintaks umum untuk membuat SimpleDialog widget dalam Flutter:showDialog( context: context, builder: (BuildContext context) { return SimpleDialog( title: Text("Judul SimpleDialog"), children: <Widget>[ SimpleDialogOption( child: Text("Pilihan 1"), onPressed: () { Navigator.of(context).pop(); }, ), SimpleDialogOption( child: Text("Pilihan 2"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan SimpleDialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek SimpleDialog dengan properti title dan children. Dalam children, kita membuat beberapa objek SimpleDialogOption sebagai pilihan yang dapat dipilih oleh pengguna. Saat pengguna memilih salah satu pilihan, kita memanggil Navigator.of(context).pop() untuk menutup SimpleDialog.

Wed, 01 Feb 2023

Stateless Widget

Stateless Widget

STATLESS WIDGETStatelessWidget adalah kelas yang digunakan dalam Flutter untuk membuat widget yang tidak memiliki state atau data yang berubah-ubah. StatelessWidget digunakan untuk membuat widget yang hanya digunakan untuk menampilkan data saja dan tidak memiliki interaksi dengan pengguna. Misalnya, widget yang digunakan untuk menampilkan teks atau gambar.Syntax dasar dari StatelessWidget adalah sebagai berikut:class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( // code to build the widget goes here ); } } Kelas MyWidget di atas adalah contoh kelas yang mengextend dari StatelessWidget. Fungsi build(BuildContext context) diimplementasi untuk mengembalikan widget yang akan ditampilkan. @override digunakan untuk menKitakan bahwa fungsi build diatas merupakan implementasi dari fungsi yang sudah ada di kelas induk (StatelessWidget).Secara umum, Kita harus menggunakan StatelessWidget jika widget yang Kita buat tidak akan berubah setelah dibuat. StatelessWidget ini sangat efisien dalam hal performa karena ia hanya akan dibangun sekali saat dibuat dan tidak akan dibangun kembali saat ada perubahan dalam aplikasi.PROPERTIBeberapa properti yang dapat digunakan dalam kelas StatelessWidget di Flutter adalah:key: digunakan untuk memberikan identitas unik pada sebuah widget sehingga dapat digunakan untuk melakukan operasi seperti animasi.child: digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini.color: digunakan untuk mengatur warna dari widget.padding: digunakan untuk menentukan jarak antara widget dengan batasnya.alignment: digunakan untuk menentukan posisi widget dalam container.constraints: digunakan untuk menentukan batasan ukuran widget.transform: digunakan untuk melakukan transformasi pada widget seperti rotasi, skala, dll.decoration: digunakan untuk menambahkan dekorasi pada widget seperti border, background, dll.Itu hanyalah beberapa properti yang bisa digunakan dalam StatelessWidget, namun masih ada yang lain yang tersedia dalam framework Flutter. Perlu diingat, setiap properti yang digunakan akan berpengaruh pada performa aplikasi jika digunakan dalam jumlah besar, sebaiknya digunakan dengan bijak dan sesuai kebutuhan aplikasi.EXAMPLEProperti child dalam StatelessWidget digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini. Widget anak ini akan ditampilkan dalam container yang ditentukan oleh widget ini.Sintaks penggunaannya adalah sebagai berikut:class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Text("Hello World!"), ); } } Di contoh diatas, widget Text dengan teks "Hello World!" akan ditampilkan dalam container yang ditentukan oleh MyWidget. Kita dapat menambahkan beberapa widget anak dengan menggunakan widget lain sebagai child.Kita juga bisa menggunakan children property untuk menambahkan beberapa widget anak sekaligusclass MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( children: <Widget>[ Text("Hello World!"), Text("Hello World!"), Text("Hello World!"), ], ); } } Properti child atau children ini sangat berguna untuk menyusun layout dan mengelompokkan widget anak dalam satu widget induk.

Wed, 25 Jan 2023

All blogs