Macam Macam Widgets Flutter

Kurnia Andi Nugroho

Tue, 17 Sep 2024

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:

1. Container: digunakan untuk menampung widget lain dan memberikan gaya seperti ukuran, posisi, margin, dan padding.
2. Row and Column: digunakan untuk mengatur posisi widget dalam baris atau kolom.
3. Text: digunakan untuk menampilkan teks dengan berbagai jenis font, ukuran, dan gaya.
4. Image: digunakan untuk menampilkan gambar dari file atau sumber internet.
5. Button: digunakan untuk menambahkan tombol interaktif dengan berbagai gaya.
6. Input: digunakan untuk menambahkan elemen input seperti text field dan checkbox.
7. ListView: digunakan untuk menampilkan daftar item dengan scroll.
8. Stack: digunakan untuk menumpuk widget satu di atas yang lain.
9. Expanded: digunakan untuk mengatur ukuran widget sesuai dengan ruang yang tersedia.
10. 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.