Dasar-Dasar Widget di Flutter

Iksan Riziq — Tue, 18 Feb 2025 10:00:54 +0000

Flutter adalah framework pengembangan aplikasi yang memungkinkan pengembang untuk membuat aplikasi untuk berbagai platform dengan satu basis kode. Salah satu konsep utama dalam Flutter adalah penggunaan widget. Di dalam Flutter, hampir semua hal, mulai dari elemen UI seperti tombol dan teks hingga struktur dasar aplikasi, semuanya adalah widget.

Pada artikel kali ini, kita akan membahas dasar-dasar widget di Flutter, apa itu widget, jenis-jenis widget, dan bagaimana cara menggunakannya.

Apa Itu Widget di Flutter?

Secara sederhana, widget adalah elemen UI yang membangun tampilan aplikasi di Flutter. Setiap elemen yang Anda lihat di layar adalah widget, dan bahkan layout atau struktur aplikasi seperti kolom atau baris juga menggunakan widget.

Pada dasarnya, widget bertanggung jawab untuk menggambarkan bagaimana elemen UI terlihat dan berfungsi di aplikasi. Setiap kali ada perubahan pada UI, widget akan digambar ulang (rebuild) untuk mencerminkan perubahan tersebut.

Jenis-jenis Widget di Flutter

Di Flutter, widget dibagi menjadi dua kategori utama:

Stateless Widget
Stateful Widget

-Stateless Widget

Stateless widget adalah widget yang tidak memiliki status internal atau keadaan yang dapat berubah. Widget ini hanya menggambar diri mereka sendiri berdasarkan data yang diberikan. Setelah widget dibuat, ia tidak akan berubah.

Contoh dari stateless widget adalah teks yang statis atau tombol yang tidak perlu melakukan perubahan berdasarkan interaksi pengguna. Berikut contoh penggunaan StatelessWidget:

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!')),
      ),
    );
  }
}

Pada contoh di atas, MyApp adalah stateless widget yang hanya menampilkan teks statis “Halo, Flutter!”.

-Stateful Widget

Stateful widget adalah widget yang memiliki status internal yang dapat berubah selama siklus hidup widget tersebut. Misalnya, tombol yang berubah warna saat ditekan atau input teks yang diperbarui berdasarkan perubahan data.

Stateful widget memiliki dua bagian utama:

Widget: Bagian ini menggambarkan struktur dan tampilan widget.
State: Bagian ini menyimpan data dan menangani perubahan tampilan saat data berubah.

Contoh penggunaan StatefulWidget:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateful Widget')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Button Pressed: $_counter times'),
              ElevatedButton(
                onPressed: _incrementCounter,
                child: Text('Press Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Pada contoh di atas, tombol yang ada akan menghitung berapa kali tombol ditekan. Ketika tombol ditekan, fungsi setState() dipanggil untuk memperbarui status dan menggambar ulang widget.

Widget dan Struktur Aplikasi Flutter

Flutter menggunakan kombinasi widget untuk membangun antarmuka aplikasi. Berikut adalah beberapa widget dasar yang sering digunakan di Flutter:

Container: Widget yang digunakan untuk membungkus elemen lain, memberi padding, margin, atau background color.

   Container(
     padding: EdgeInsets.all(10),
     color: Colors.blue,
     child: Text('Ini adalah Container'),
   );

Row dan Column: Digunakan untuk menyusun widget secara horizontal (Row) atau vertikal (Column).

   Column(
     children: <Widget>[
       Text('Item 1'),
       Text('Item 2'),
       Text('Item 3'),
     ],
   );

Scaffold: Menyediakan struktur dasar untuk layout aplikasi seperti AppBar, Drawer, dan body.

   Scaffold(
     appBar: AppBar(
       title: Text('Contoh Scaffold'),
     ),
     body: Center(child: Text('Halo, Flutter!')),
   );

Text : Widget untuk menampilkan teks.

   Text('Halo, Flutter!', style: TextStyle(fontSize: 24)),

ElevatedButton: Digunakan untuk menampilkan tombol yang dapat ditekan.

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

Cara Kerja Widget di Flutter

Di Flutter, setiap kali status aplikasi berubah, widget akan dibangun ulang untuk mencerminkan perubahan tersebut. Proses ini terjadi dengan cepat berkat tree of widgets (pohon widget). Semua widget di Flutter diorganisir dalam struktur pohon, di mana setiap widget dapat memiliki anak widget.

Proses pembaruan UI ini disebut sebagai rebuild, dan Flutter mengoptimalkannya agar aplikasi tetap berjalan dengan lancar meski sering terjadi pembaruan UI.

Kesimpulan

Widget adalah konsep inti di Flutter. Baik itu untuk menampilkan teks sederhana, tombol, atau elemen UI yang lebih kompleks, semua dibuat menggunakan widget. Dengan memahami dasar-dasar widget, seperti StatelessWidget dan StatefulWidget, Anda dapat mulai membangun aplikasi yang lebih interaktif dan dinamis. Selalu ingat untuk memilih jenis widget yang sesuai dengan kebutuhan aplikasi Anda untuk mencapai performa dan pengalaman pengguna yang optimal.

DEV Community: Iksan Riziq

Dasar-Dasar Widget di Flutter