Materi Pembelajaran Flutter: Memahami Widget

 Materi Pembelajaran Flutter: Memahami Widget

1. Pengertian Flutter

Flutter adalah framework open-source yang dikembangkan oleh Google untuk membuat aplikasi dengan satu kode program yang dapat dijalankan pada berbagai platform, seperti Android, iOS, Web, dan Desktop.

Flutter menggunakan bahasa pemrograman Dart.

2. Apa Itu Widget?

Widget adalah komponen dasar dalam Flutter yang digunakan untuk membangun tampilan dan fungsi aplikasi.

Hampir semua bagian aplikasi Flutter merupakan widget, misalnya:

Teks → Text

Tombol → ElevatedButton

Gambar → Image

Kotak/wadah → Container

Baris → Row

Kolom → Column

Ikon → Icon

Sederhananya:

Widget = bagian-bagian yang digunakan untuk membangun aplikasi Flutter.

3. Jenis-Jenis Widget

Secara umum, widget Flutter dapat dibagi menjadi dua jenis:

A. StatelessWidget

StatelessWidget adalah widget yang tidak memiliki data atau keadaan yang berubah selama widget tersebut ditampilkan.

Contoh:

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return const Text(

      'Halo Flutter!',

    );

  }

}

Cocok digunakan untuk tampilan yang sederhana dan tidak berubah berdasarkan interaksi pengguna.

B. StatefulWidget

StatefulWidget adalah widget yang dapat berubah ketika terjadi suatu peristiwa atau interaksi pengguna.

Contohnya:

Counter bertambah ketika tombol ditekan.

Checkbox berubah ketika dipilih.

Tampilan berubah ketika data diperbarui.

Contoh sederhana:

import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {

  const CounterPage({super.key});

  @override

  State<CounterPage> createState() => _CounterPageState();

}

class _CounterPageState extends State<CounterPage> {

  int angka = 0;

  void tambah() {

    setState(() {

      angka++;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Text(

              'Angka: $angka',

              style: const TextStyle(fontSize: 25),

            ),

            ElevatedButton(

              onPressed: tambah,

              child: const Text('Tambah'),

            ),

          ],

        ),

      ),

    );

  }

}

Perbedaan

StatelessWidget

StatefulWidget

Tampilan relatif tetap

Tampilan dapat berubah

Tidak menggunakan setState()

Dapat menggunakan setState()

Cocok untuk teks, ikon, tampilan sederhana

Cocok untuk counter, form, checkbox, dll.

4. Widget Dasar yang Sering Digunakan

Text

Digunakan untuk menampilkan tulisan.

Text('Halo Dunia');

Container

Digunakan sebagai wadah untuk mengatur ukuran, warna, margin, padding, dan dekorasi.

Container(

  width: 200,

  height: 100,

  color: Colors.blue,

  child: const Text('Flutter'),

);

Row

Menyusun widget secara horizontal.

Row(

  children: [

    Icon(Icons.home),

    Text('Beranda'),

  ],

);

Column

Menyusun widget secara vertikal.

Column(

  children: [

    Text('Nama'),

    Text('Alamat'),

    Text('Kelas'),

  ],

);

Image

Digunakan untuk menampilkan gambar.

Image.network(

  'https://example.com/gambar.jpg',

);

Icon

Digunakan untuk menampilkan ikon.

Icon(Icons.favorite);

ElevatedButton

Digunakan untuk membuat tombol.

ElevatedButton(

  onPressed: () {

    print('Tombol ditekan');

  },

  child: const Text('Klik Saya'),

);

5. Widget Tree

Flutter menggunakan konsep Widget Tree, yaitu widget disusun seperti struktur pohon.

Contohnya:

MaterialApp

   └── Scaffold

       ├── AppBar

       │ └── Text

       │

       └── Center

            └── Column

                 ├── Text

                 ├── Icon

                 └── ElevatedButton

Contoh kode:

MaterialApp(

  home: Scaffold(

    appBar: AppBar(

      title: const Text('Aplikasi Saya'),

    ),

    body: Center(

      child: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          const Text('Halo Flutter'),

          const Icon(Icons.phone_android),

          ElevatedButton(

            onPressed: () {},

            child: const Text('Mulai'),

          ),

        ],

      ),

    ),

  ),

);

6. Scaffold

Scaffold merupakan struktur dasar halaman aplikasi Material Design.

Biasanya berisi:

Scaffold

├── AppBar

├── Body

├── FloatingActionButton

├── Drawer

└── BottomNavigationBar

Contoh:

Scaffold(

  appBar: AppBar(

    title: const Text('Home'),

  ),

  body: const Center(

    child: Text('Selamat Datang'),

  ),

);

7. BuildContext

BuildContext merupakan informasi mengenai posisi sebuah widget di dalam Widget Tree.

Contohnya:

Widget build(BuildContext context) {

  return const Text('Hello');

}

BuildContext juga sering digunakan untuk mengakses informasi seperti tema, ukuran layar, atau melakukan navigasi.

8. Kenapa Widget Penting?

Memahami widget sangat penting karena:

Semua tampilan Flutter dibangun menggunakan widget.

Membantu membuat UI aplikasi.

Memudahkan pengaturan layout.

Membantu membuat aplikasi interaktif.

Widget dapat disusun dan digunakan kembali.

Mempermudah pengembangan aplikasi yang kompleks.

9. Kesimpulan

Widget merupakan fondasi utama dalam Flutter. Setiap komponen aplikasi, mulai dari teks, tombol, gambar, ikon, hingga struktur halaman, dibangun menggunakan widget.

Widget yang paling penting untuk dipahami oleh pemula adalah:

Text → Container → Row → Column → Image → Icon → ElevatedButton → Scaffold → StatelessWidget → StatefulWidget.

Dengan memahami widget dan Widget Tree, kita akan lebih mudah membuat tampilan aplikasi Flutter yang terstruktur dan interaktif.