Basic Widget Flutter

Firman Justisio L — Thu, 04 Feb 2021 23:08:12 +0000

Flutter 🤔 ?

Jadi flutter adalah framework mobile application yang dibuat oleh google dengan menggunakan bahasa dart 🎯. Banyak hal keren dari flutter, yaitu salah satunya memiliki banyak widget - widget yang cantik.

Beberapa Contoh Widget Flutter

- StatefulWidget

class SampleStatefulWidget extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _SampleStatefulWidgetState extends State<SampleStatefulWidget> {
  @override
  Widget build(BuildContext context) {

  }
}

Pada flutter pasti banyak variable dengan value yang berubah ubah saat membuat aplikasi dan tentunya mempengaruhi tampilan, disitu kita akan membutuhkan stateful dengan widget satu ini kita bisa mengubah tampilan sejalan dengan variable dengan mudah. Untuk mengubah tampilan kita harus menjalankan setState(), cara kerja setState yaitu dimulai saat pemanggilan disitu setState memberi tahu kalau ada perubahan pada variable kemudian framework merespon dengan membuild ulang widget tersebut.

- StatelessWidget

class SampleStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

  }
}

Berbeda dengan stateful, widget stateless tidak bisa
melakukan perubahan pada tampilannya, code penulisannya juga lebih sedikit. Jadi saat suatu variable yang melakukan perubahan pada value widget ini tidak akan ikut berubah.

- Container

Container()

Container, widget yang paling sering dipakai dalam flutter 😮
Widget ini sering diakai untuk pembungkus widget lain, dengan container bisa melakukan banyak hal dari memberi jarak, mengatur ukuran, memberi warna pada background.

- Text

Text()

Text, sesuai namanya widget ini digunakan untuk membuat text pada flutter, text yang dibuat juga bisa diubah ubah dengan mengganti warna ataupun ukuran, penggunaan widget juga bisa digabung dengan container.

Container(
    child: Text(
        'Hello World', 
        style: TextStyle(
            color: Color(0xffF8C92C)
        )
    )
)

- Image

Image()

Dalam membuat aplikasi mobile pasti memiliki banyak object, salah satunya mengandung image, dalam membuat aplikasi flutter kita bisa menggunakan widget ini untuk menampilkan image, sumber image bisa dari url maupun dari local.

Dibawah source code untuk menampilkan image dari local

Image(
    image: AssetImage('assets/image.png')
)

DEV Community: Firman Justisio L