Widget Dasar Dalam Pemrograman Flutter

Dalam coding, tentunya kita mengenal beberapa hal terkait dengan teks, tombol, input, simbol atau hal yang lainnya. Hal-hal tersebut di dalam flutter dinamakan dengan widget. 

Sederhananya, dalam flutter semua hal dinamakan dengan widget. Widget-widget ini terbagi ke dalam berbagai nama dan fungsi masing-masing. Seperti widget teks berguna untuk menampilkan tulisan ke layar Android / iOS atau widget icon digunakan untuk memanggil ikon-ikon yang disedikan oleh library material.

Secara sederhana dalam flutter dibagi dalam tiga bagian utama, yaitu library, main() dan class yang dijalankan. Mari kita lihat baris kode sederhana dibawah :

import 'package:flutter/material.dart'; // Bagian 1

void main() { // Bagian 2

  runApp(MyApp());

}

class MyApp extends StatelessWidget { // Bagian 3

  @override

  Widget build(BuildContext context) {

    return widget;

  }

}

Pada bagian 1, merupakan bagian untuk library. Secara default import '..../material.dart'; akan selalu ada secara otomatis. Ini menginformasikan bahwa kita menggunakan tampilan Material Design.

Terkait dengan  material design, bisa baca lebih lanjut di sini

Pada bagian 2, di bagian ini merupakan bagian utama. Ini yang akan dijalankan pertama kali saat baris kode dijalankan, yaitu dengan memanggil class MyApp() oleh fungsi runApp().

Kemudian di bagian 3, merupakan sebuah class yang dipanggil oleh runApp(). Class ini di extends dengan StatelessWidget atau dengan StatefulWidget. Apa bedanya kedua hal ini ? Kita akan bahas tentang ini di lain artikel. MyApp ini di dalamnya memiliki method build() yang nantinya memiliki return MaterialApp().

Di bagian return bagiannya menjadi : 

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(),

    );

MaterialApp() ini merupakan widget yang di dalamnya memiliki properti home yang digunakan untuk memanggil wadah untuk berbagai widget. Wadah tersebut yaitu Scaffold(). Widget tersebut nantinya yang akan di tampilkan di layar gatget.

Wadah Scaffold ini, memiliki properti lain yang akan langsung ditampilkan kepada user yaitu properti appBar dan body. Peletakan kedua properti ini bisa dilihat seperti dibawah :

return MaterialApp(

      home: Scaffold(

        appBar: ,

        body: ,

      ),

    );

Kedua properti ini diisi dengan widget. Widget yang diisi dalam properti ini adalah :

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text("Belajar Flutter"),

        ),

        body: Text("Hi! Belajar Flutter bersama s.id/blog-coding"),

      ),

    );

Coba dengan beberapa baris kode diatas, mari kita jalankan dengan flutter run :

Nah, selanjutnya mari kita bahas di bagian ini :

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text("Belajar Flutter"),

        ),

        body: Text("Hi! Belajar Flutter bersama s.id/blog-coding"),

      ),

    );

AppBar() merupakan widget yang tampil dengan warna biru diatas. Widget ini memiliki beberapa properti, di bagian kode atas ditampilkan contoh penggunaan properti title dalam widget AppBar(). Kemudian untuk properti body, merupakan bagian yang akan di tampilkan di wilayah dengan warna putih, yaitu area dibawah AppBar().

Yap! Cukup sampai disini artikel kali ini...

Semoga bermanfaat 😊