🪐 Flutter Widgets = The Building Blocks of Your App's Universe and Beyond ~

محمد يزيد الصبري - Feb 18 - - Dev Community

Bismillaah..

Okay, Kembali Lagi Dengan Saya.. Kali Ini Kita Mau Bahas Dasar-dasar Widget Di Flutter!

Mengenal Widget Di Flutter: Pondasi Penting Untuk Membuat Aplikasi Mobile Keren

Flutter, Sebuah "Alat Ajaib" Dari Google Atau Yang Kita Sebut Dengan Framework, Lagi Ngetren Banget Di Kalangan Pembuat Aplikasi Mobile Untuk Saat Ini.. Kenapa Ya? Ya Mungkin Karena Flutter Bikin Proses Pembuatan Aplikasi Jadi Lebih Mudah Dan Cepat! Nah,.. Salah Satu Kunci Penting Yang Wajib Kalian Tahu Di Flutter Adalah "Widget"..

Anggap Aja Widget Itu Kayak "Bahan Bangunan" Atau Realitanya Seperti "Bahan Melukis" Kalian Untuk Bikin "Lukisan Yang Indah" Di Sini Kita Katakan Sebagai Tampilan Aplikasi.. Mulai Dari Tombol, Tulisan, Gambar, Sampai Tata Letak Keseluruhan, Semuanya Dibentuk Pakai Widget! Yeah, You Got It!

Apa Sih Widget Itu?

Gampangnya, Widget Itu Adalah Representasi Atau Sesuatu Yang Mewakili Pembuatan Visual Dari Setiap Elemen Yang Ada Di Aplikasi Flutter Kalian..

Setiap Hal Yang Kalian Liat Di Layar, Entah Itu Tombol "Login", Tulisan "Welcome/Selamat Datang", Atau Gambar Logo Aplikasi, Semuanya Adalah Widget!

Widget Ini Sifatnya "Deklaratif" Ya, Maksudnya Kalian Cukup Jelasin Aja Mau Seperti Apa Tampilan Dan Kelakuan Widget Itu, Dan Flutter Yang Akan Urus Sisanya. Keren, Kan?

Jenis-jenis Widget Di Flutter

Flutter Punya Banyak Banget Jenis Widget Yang Bisa Kalian Pakai Untuk Membangun Tampilan Aplikasi Yang Keren Dan Interaktif. Secara Umum, Widget-widget Ini Bisa Dikelompokkan Jadi Beberapa Kategori Loh.. Seperti:

1. Widget Teks: Nah, Ini Dia Widget Yang Paling Sering Dipakai Untuk Menampilkan Tulisan Di Layar.. Contohnya Adalah Widget Text..

2. Widget Gambar: Kalau Mau Nampilin Gambar, Pakainya Widget Image. Gampang Banget, Kan?

3. Widget Tata Letak: Widget Ini Berguna Untuk Mengatur Posisi Dan Ukuran Widget-widget Lainnya. Contohnya Adalah Row (Untuk Mengatur Widget Secara Horizontal), Column (Untuk Vertikal), Dan Stack (Untuk Menumpuk Widget).

4. Widget Interaktif: Widget Ini Memungkinkan Pengguna Berinteraksi Dengan Aplikasi. Contohnya Adalah ElevatedButton (untuk Bikin Tombol) Dan TextField (Untuk Input Teks).

5. Widget Scaffold: Widget Ini Adalah "Kerangka Dasar" untuk Membangun Tata Letak Aplikasi, Bagaikan Kanvas Kalian. Di Dalamnya Ada AppBar (Untuk Bagian Atas Aplikasi), Drawer (Untuk Menu Samping), Dan BottomNavigationBar (Untuk Navigasi Di Bagian Bawah).

Yuk, Sekarang Saatnya Coba Pakai Widget!

Biar Lebih Jelas, Coba Lihat Contoh Sederhana Penggunaan Beberapa Widget Di Flutter Di Bawah Ini Ya:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contoh Widget'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Halo Dunia!'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // Aksi Yang Akan Dijalankan Ketika Tombol Ditekan
                },
                child: Text('Tekan Saya'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Di Contoh Ini, Kita Pakai Widget MaterialApp Sebagai "Rumah" Dari Aplikasi Kita. Di Dalamnya Ada Widget Scaffold Yang Berisi AppBar Dan Column. Widget Column Digunakan Untuk Mengatur Posisi Widget Text Dan ElevatedButton Secara Vertikal Di Tengah Layar..

Okay, Jadi Saya Rasa Cukup Ya Untuk Penjelasan Singkat Tentang Dasar-dasar Widget Of Flutter Di Artikel Kali Ini.. Semoga Dapat Dipahami Dan Semangat Bereksperimen! See U In The Next Time!!

Wassalaam..

. . . . .