Stateless Widget

Kurnia Andi Nugroho

Tue, 17 Sep 2024

STATLESS WIDGET

StatelessWidget 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.

PROPERTI

Beberapa properti yang dapat digunakan dalam kelas StatelessWidget di Flutter adalah:

1. key: digunakan untuk memberikan identitas unik pada sebuah widget sehingga dapat digunakan untuk melakukan operasi seperti animasi.
2. child: digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini.
3. color: digunakan untuk mengatur warna dari widget.
4. padding: digunakan untuk menentukan jarak antara widget dengan batasnya.
5. alignment: digunakan untuk menentukan posisi widget dalam container.
6. constraints: digunakan untuk menentukan batasan ukuran widget.
7. transform: digunakan untuk melakukan transformasi pada widget seperti rotasi, skala, dll.
8. 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.

EXAMPLE

Properti 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 sekaligus

class 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.