Widgets Flutter

Widgets adalah blok bangunan dasar dari antarmuka pengguna (UI) di Flutter. Setiap elemen di layar, mulai dari tombol hingga teks, adalah widget. Flutter menggunakan pendekatan berbasis komposisi, di mana widget digabungkan untuk membuat UI yang kompleks.

Jenis-Jenis Widgets

Flutter menyediakan berbagai macam widgets yang dapat dikategorikan sebagai berikut:

• Widgets Struktur Dasar:
  • MaterialApp: Widget akar untuk aplikasi Material Design.
  • Scaffold: Menyediakan struktur dasar untuk halaman aplikasi, termasuk app bar, body, dan bottom navigation.
  • Container: Widget yang dapat digunakan untuk mengatur tata letak dan gaya widget lain.
  • Row dan Column: Widget yang digunakan untuk mengatur widget secara horizontal dan vertikal.
  • Stack: Widget yang digunakan untuk menumpuk widget satu sama lain.
• Widgets Tampilan Teks:
  • Text: Widget untuk menampilkan teks.
  • TextField: Widget untuk menerima input teks dari pengguna.
• Widgets Tombol dan Interaksi:
  • ElevatedButton: Tombol dengan efek elevasi.
  • TextButton: Tombol teks.
  • IconButton: Tombol dengan ikon.
  • GestureDetector: Widget untuk mendeteksi gestur pengguna.
• Widgets Gambar dan Ikon:
  • Image: Widget untuk menampilkan gambar.
  • Icon: Widget untuk menampilkan ikon.
• Widgets Tata Letak:
  • ListView: Widget untuk menampilkan daftar item yang dapat digulir.
  • GridView: Widget untuk menampilkan grid item yang dapat digulir.
  • Expanded: Widget untuk mengisi ruang yang tersedia dalam tata letak.
• Widgets Navigasi:
  • Navigator: Widget untuk mengelola tumpukan halaman aplikasi.
  • BottomNavigationBar: Widget untuk navigasi antar halaman di bagian bawah layar.

Contoh Penggunaan Widgets

Dart

import 'package:flutter/material.dart';

class ContohWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contoh Widgets'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Halo, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Aksi ketika tombol ditekan
              },
              child: Text('Tekan Saya'),
            ),
          ],
        ),
      ),
    );
  }
}

Kode ini menunjukkan contoh penggunaan beberapa widgets dasar seperti Scaffold, AppBar, Text, dan ElevatedButton.

Widget Statefull dan Stateless

• StatelessWidget: Widget yang tidak memiliki status internal. Tampilannya tidak berubah setelah dibuat.
• StatefulWidget: Widget yang memiliki status internal. Tampilannya dapat berubah sebagai respons terhadap interaksi pengguna atau perubahan data.

Widget Tree

• Flutter membangun UI dengan membuat widget tree.
• Setiap widget adalah node di tree.
• Flutter menggunakan tree ini untuk merender UI di layar.

Tips Penggunaan Widgets

• Gunakan widgets yang sesuai untuk kebutuhan Anda.
• Gunakan tata letak yang efisien untuk membuat UI yang responsif.
• Gunakan widgets yang dapat digunakan kembali untuk mengurangi duplikasi kode.

Pelajari dokumentasi resmi Flutter untuk mengetahui lebih lanjut tentang widgets yang tersedia.