Created by - Kurnia Andi Nugroho
Macam Macam Widgets Flutter
WIDGETSWidgets 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 WIDGETSAda 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.CONATAINERSintaks 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.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
Stateful Widget
STATEFUL WIDGETStatefulWidget adalah jenis widget di Flutter yang menyimpan data internal yang dapat diubah. StatefulWidget dapat diubah secara dinamis selama runtime, dan juga dapat diperbarui ketika ada perubahan dalam data internalnya. StatefulWidget harus digunakan jika Kita memerlukan widget yang dapat diubah setelah dibangun.Sintaks untuk membuat StatefulWidget di Flutter adalah sebagai berikut:class MyWidget extends StatefulWidget { @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Container( child: Text('Counter: $_counter'), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), ); } } Di atas, kelas MyWidget yang mengextend StatefulWidget, dan kelas ini memiliki metode createState() yang mengembalikan objek baru dari kelas _MyWidgetState. Kelas _MyWidgetState mengextend State<MyWidget>, di mana MyWidget adalah kelas induknya, dan ini memiliki metode build(BuildContext context) yang digunakan untuk membuat tampilan widget.Secara umum, StatefulWidget memiliki 2 class yaitu :class yang mengextend StatefulWidgetclass yang mengextend State (T = class yang mengextend StatefulWidget)Dan class yang mengextend State yang memiliki metode build yang digunakan untuk membuat tampilan widget.PROPERTIBeberapa properti yang dapat digunakan pada StatefulWidget di Flutter adalah sebagai berikut:key: Digunakan untuk mengidentifikasi widget unik dalam hierarki widget.child: Digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini.initialData: Digunakan untuk menentukan data awal yang akan digunakan oleh widget.state: Digunakan untuk mengakses objek State yang digunakan oleh widget.build: Fungsi yang digunakan untuk membuat tampilan widget.didUpdateWidget: Dipanggil ketika widget diperbarui, dapat digunakan untuk melakukan aksi seperti memperbarui data internal.dispose: Dipanggil ketika widget dihapus dari hierarki widget, dapat digunakan untuk membersihkan sumber daya yang digunakan oleh widget.createState: Dipanggil ketika widget dibuat, digunakan untuk menciptakan objek State yang akan digunakan oleh widget.Namun, beberapa properti diatas adalah properti yang umum digunakan pada semua jenis widget, sebagian lagi adalah properti yang spesifik pada StatefulWidget.EXAMPLEProperti initialData digunakan untuk menentukan data awal yang akan digunakan oleh StatefulWidget. Sintaks untuk menentukan data awal pada StatefulWidget adalah sebagai berikut:class MyWidget extends StatefulWidget { final String initialText; MyWidget({required this.initialText}); @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { String _text; @override void initState() { super.initState(); _text = widget.initialText; } @override Widget build(BuildContext context) { return Container( child: Text(_text), ); } } Di atas, kelas MyWidget yang menerima parameter initialText pada constructor-nya. Kemudian di kelas _MyWidgetState, kami menggunakan widget.initialText untuk menentukan nilai awal dari _text.Kita dapat menggunakan properti initialData pada constructor dari class yang mengextend StatefulWidget, dan mengambil data ini di kelas yang mengextend State dengan mengakses widget.initialData pada method initState atau di method lain yang sesuai.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
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.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
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.
More detailsPublished - Wed, 01 Feb 2023
Created by - Kurnia Andi Nugroho
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.
More detailsPublished - Thu, 02 Feb 2023
Search
Popular categories
Flutter
5Framework7
4Latest blogs
Flutter Widget ListTile
Thu, 02 Feb 2023
Flutter Widget Dialog
Wed, 01 Feb 2023
Stateless Widget
Wed, 25 Jan 2023
Write a public review