DEV Community

Cover image for Basic Widget Flutter
Firman Justisio L
Firman Justisio L

Posted on

Basic Widget Flutter

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) {

  }
}
Enter fullscreen mode Exit fullscreen mode

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) {

  }
}
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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)
        )
    )
)
Enter fullscreen mode Exit fullscreen mode

- Image

Image()
Enter fullscreen mode Exit fullscreen mode

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')
)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)