Belajar Dasaran Flutter - Tentang Widget

1. Pengenalan Widget di Flutter

Flutter menggunakan pendekatan berbasis widget, di mana setiap elemen UI dibangun menggunakan widget.
Salah satu konsep paling penting yang perlu dipahami di Flutter adalah Widget. Widget adalah jantung dari Flutter. Sebagai gambaran Widget adalah blok bangunan dasar dari setiap aplikasi Flutter. Dalam blog ini, kita akan membahas dasar-dasar widget, jenis-jenisnya, dan bagaimana menggunakannya dengan contoh kode sederhana.

Apa Itu Widget?

Di Flutter, semuanya adalah widget. Mulai dari teks, tombol, gambar, hingga tata letak (layout) semuanya dibangun menggunakan widget. Widget adalah komponen UI yang mendefinisikan tampilan dan perilaku aplikasi. Flutter menggunakan pendekatan widget-based untuk membangun antarmuka pengguna.

Jenis-Jenis Widget

Secara umum, widget di Flutter dibagi menjadi dua jenis:

1. Stateless Widget: Widget yang tidak dapat berubah (immutable). Digunakan untuk elemen UI yang statis, contohnya adalah teks, ikon atau gambr yang tampilannya tetap. Gunakan Stateless Widget → Kalau UI kamu statis.

2. Stateful Widget: Widget yang dapat berubah (mutable). Digunakan Untuk elemen UI yang berubah berdasarkan interaksi pengguna, contohnya adalah tombol yang berubah warna saat diklik. Gunakan Stateful Widget → Kalau UI bisa berubah.

Stateless Widget

Stateless berarti "tanpa keadaan" atau "tidak memiliki state". Artinya, widget ini tidak dapat berubah setelah dibuat. Semua properti yang diberikan bersifat final (konstan). Contohnya adalah teks, ikon, atau gambar yang tidak berubah selama aplikasi berjalan.

Fungsi
Digunakan untuk UI yang statis dan tidak berubah.
Cocok untuk elemen yang hanya menampilkan data tanpa interaksi dinamis.

Berikut adalah contoh Stateless Widget yang menampilkan teks dan ikon:

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('Stateless Widget')),
        body: Center(
          child: Text(
            'Halo, Flutter!',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

🔍 Penjelasan Kode

• _MyApp _adalah Stateless Widget karena tidak memiliki perubahan state.
• Menggunakan _MaterialApp _sebagai root aplikasi.
• Scaffold digunakan untuk struktur halaman.
• _Text _sebagai contoh Stateless Widget, tampilannya tidak berubah.

Stateful Widget

Stateful berarti "memiliki keadaan" atau "bisa berubah". Widget ini dapat berubah saat aplikasi berjalan karena memiliki state yang dapat diperbarui.

Fungsi
Digunakan untuk UI yang dapat berubah berdasarkan interaksi pengguna.
Cocok untuk elemen seperti tombol yang berubah warna, daftar yang bisa diperbarui, atau input pengguna.

Berikut adalah contoh Stateful Widget dengan tombol yang mengubah warna saat diklik:

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('Stateful Widget')),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  bool isClicked = false;

  void toggleColor() {
    setState(() {
      isClicked = !isClicked;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: toggleColor,
      style: ElevatedButton.styleFrom(
        backgroundColor: isClicked ? Colors.green : Colors.blue,
      ),
      child: Text(
        'Klik Saya!',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

🔍 Penjelasan Kode

• _MyButton _adalah Stateful Widget karena dapat berubah.
• __MyButtonState _menyimpan variabel isClicked untuk menentukan warna tombol.
• toggleColor() dipanggil saat tombol ditekan, lalu memanggil setState() untuk memperbarui UI.
• Warna tombol berubah biru → hijau saat diklik.

2. Widget Dasar (Basic Widgets)

Widget dasar adalah widget yang paling sering digunakan untuk membangun UI. Berikut beberapa contohna:

a. Text (Menampilkan Teks)
"Text" berarti teks yang dapat ditampilkan di layar.
Digunakan untuk menampilkan teks dengan berbagai gaya.

Text(
  'Halo, Flutter!',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
);

🔍 Penjelasan

• _Text _menampilkan teks "Halo, Flutter!".
• _TextStyle _digunakan untuk mengatur ukuran font, ketebalan, dan warna.

b. Image (Menampilkan Gambar)
"Image" berarti gambar yang dapat ditampilkan di layar.
Digunakan untuk menampilkan gambar dari berbagai sumber.

Image.network('https://flutter.dev/images/flutter-logo-sharing.png');
Image.asset('assets/images/flutter_logo.png');

🔍 Penjelasan

• Image.network() menampilkan gambar dari URL.
• Image.asset() menampilkan gambar dari folder aset aplikasi.

c. Icon (Menampilkan Ikon)
"Icon" berarti ikon yang dapat ditampilkan di layar.
Digunakan untuk menampilkan ikon dari Material Icons atau Cupertino Icons.

Icon(Icons.home, size: 50, color: Colors.blue);

🔍 Penjelasan

• Icons.home adalah ikon rumah bawaan dari Flutter.
• _size _mengatur ukuran ikon, color mengatur warnanya.

d. Button (Tombol Interaktif)
"Button" berarti tombol yang dapat ditekan.
Digunakan untuk menangani interaksi pengguna.

ElevatedButton (Tombol dengan Latar Belakang)

ElevatedButton(
  onPressed: () {
    print('Tombol ditekan!');
  },
  child: Text('Klik Saya'),
);

TextButton (Tombol Tanpa Latar Belakang)

TextButton(
  onPressed: () {
    print('Tombol ditekan!');
  },
  child: Text('Klik Saya'),
);

IconButton (Tombol dengan Ikon)

IconButton(
  onPressed: () {
    print('Ikon ditekan!');
  },
  icon: Icon(Icons.home),
);

🔍 Penjelasan

• onPressed adalah fungsi yang dipanggil ketika tombol ditekan.
• _child _digunakan untuk menentukan isi tombol (teks atau ikon).