Flutter menyediakan beragam widget yang dapat digunakan oleh developer untuk mengembangkan aplikasi yang dapat digunakan sebagai multi-platform, dan tentunya flutter sangat mudah digunakan bagi para developer yang baru memulai belajar pemrogramming, dan pada artikel ini akan membahas widget widget dasar pada flutter yang perlu di pelajari saat memulai mempelajari Framework Flutter

Apa itu Widget

Widget adalah komponen-komponen pendukung pada Flutter seperti Button, Text, Icon dan lain sebagainya. Semua yang berada pada tampilan aplikasi kita disebut dengan Widget. Dibawah ini kita akan membahas widget-widget yang paling sering dipakai pada Flutter.

Material App & Scaffold

Karna kita sudah membuat aplikasi Sederhana pertama kita, lalu saya ingin membahas apa itu Material App dan Scaffold, saat kita membuat aplikasi kita pasti menggunakan Material App dan Scaffold, dan saya akan menjelaskan keduanya

• Material App adalah starting point atau fungsi utama yang sangat penting yang bisa menampung banyak widget widget penting. Berikut kode Material App 

return MaterialApp(
 title: 'Flutter Demo',
 theme: ThemeData(primarySwatch: Colors.blue),
 home: Scaffold(
   appBar: AppBar(
     title: Text('Aplikasi Pertama'),
   ),
   body: Center(
     child: Text('Hello, world!'),
   ),
 ),
);

Dan Material App pasti ada di semua aplikasi karna dialah utamanya saat membuat tampilan, dan didalam material app memiliki title / nama aplikasi, theme / tema aplikasi kita, dan home adalah 

• Scaffold merupakan sebuah widget yang digunakan untuk menampilkan tampilan

dasar pada aplikasi flutter, yang dapat juga disebut dasar halaman pada aplikasi flutter : Berikut kode Scaffold 

home: Scaffold(),

bila scafoold kita kosongkan maka tampilan di layar maka kosong berwarna putih seperti berikut :

Dan dalam Scaffold memilki 3 bagian yaitu appBar, Body, dan FloatingActionButton, tentunya sangat penting dalam pembuatan aplikasi flutter, Berikut kode Scaffold, appBar, Body  dan FloatingActionButton

home: Scaffold(
   appBar: AppBar(
     title: Text('Aplikasi Pertama'),
   ),
   body: Center(
     child: Text('Hello, world!'),
   ),
   floatingActionButton: FloatingActionButton(
    onPressed: (){},
    child: const Icon(Icons.add),
 ),
),

Dan tampilan berikut penjelasan Scaffold, appBar, Body, dan FloatingActionButtondalam tampilan aplikasi kita dalam  :

SafeArea 

Tampilan layar handphone yang berbeda, terkhususnya bagi hape yang memiliiki Notch, WaterDrop, dll, yang memiliki poni dibagian atas layar handphone untuk menempatkan Kamera depan Handphone yang tentunya membuat kita seorang pengembang menjadi sulit untuk menentukan margin atas, dan dalam di dalam flutter terdapat Widget yang bernama SafeArea yang memudah kita untuk menaruh margin agar tampilan aplikasi kita tidak mengenai status bar yang berada pada handphone. Berikut contoh kode SafeArea

body: SafeArea(
   child: const Text('Hello, world!')
),

Berikut Perbandingan tanpa menggunakan SafeArea

Bila kita tidak menggunakana SafeArea maka content kita bisa bertabrakan dengan Status Bar pada Handphone maka bila kita menggunakan SafeArea terjadinya content kita bertabrakan dengan Status Bar menjadi kecil. 

AppBar

AppBar merupakan salah satu bagian umum yang terdapat pada tampilan layar Aplikasi, yang dapat memudahkan pengguna untuk menunjukanlayar mana yang sedang ia berada di dalam aplikasi, dan juga AppBar bisa menaruh Button, icon, untuk menavigasi ke layar tertentu dan widget ini terdapat paling di atas layar aplikasi, Contoh AppBar

Berikut contoh kode AppBar Sederhana

appBar: AppBar(
 title: Text("Ini adalah AppBar"),
),

AppBar menyediakan tampilan seperti daftar menu, judul aplikasi ataupun tombol-tombol aksi contohnya tombol pencarian, notifikasi ataupun menu lainnya. dan berikut contoh Appbar yang memiliki widget – Widget

Berikut Kodenya :

appBar: AppBar(
 title: Text("Ini adalah AppBar"),
),

Berikutlah beberapa widget widget dasar pada flutter yang cocok untuk digunakan untuk memulai pembuatan aplikasi Flutter