MATERI PEMBELAJARAN FLUTTER — MEMAHAMI WIDGET

           PEMBELAJARAN FLUTTER — MEMAHAMI WIDGET

1. Tujuan Pembelajaran

Setelah mempelajari materi ini, peserta didik diharapkan mampu:

1. Menjelaskan pengertian widget pada Flutter.

2. Memahami fungsi widget dalam membangun aplikasi Flutter.

3. Membedakan "StatelessWidget" dan "StatefulWidget".

4. Mengenal beberapa widget dasar Flutter.

5. Membuat tampilan sederhana menggunakan widget.

6. Memahami konsep widget tree.

---

2. Pengertian Flutter

Flutter adalah framework yang digunakan untuk membuat aplikasi dengan satu basis kode untuk berbagai platform, seperti Android, iOS, web, dan desktop.

Flutter menggunakan bahasa pemrograman Dart.

Salah satu konsep terpenting dalam Flutter adalah Widget.

---

3. Apa Itu Widget?

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

Hampir semua bagian aplikasi Flutter merupakan widget, mulai dari:

- Teks

- Tombol

- Gambar

- Kotak atau container

- Baris dan kolom

- Halaman aplikasi

- Struktur layout

Contohnya:

Text('Halo Flutter')

Kode tersebut membuat widget "Text" yang digunakan untuk menampilkan tulisan.

---

4. Konsep Widget Tree

Widget pada Flutter disusun dalam bentuk struktur bertingkat yang disebut Widget Tree.

Contoh:

MaterialApp

└── Scaffold

    ├── AppBar

    │ └── Text

    └── Body

        └── Center

            └── Text

Artinya, sebuah widget dapat memiliki widget lain sebagai child atau bagian di dalamnya.

Contoh kode:

Center(

  child: Text('Halo Flutter'),

)

Pada contoh tersebut:

- "Center" adalah parent widget.

- "Text" adalah child widget.

---

5. StatelessWidget

"StatelessWidget" adalah widget yang tampilannya tidak memiliki state yang berubah secara langsung selama widget tersebut digunakan.

Contoh:

class HelloWidget extends StatelessWidget {

  const HelloWidget({super.key});

  @override

  Widget build(BuildContext context) {

    return const Text('Halo Flutter!');

  }

}

Widget ini cocok digunakan untuk tampilan yang relatif tetap.

Ciri-ciri StatelessWidget

- Tidak menyimpan state yang dapat berubah.

- Cocok untuk tampilan sederhana.

- Menggunakan method "build()".

- Lebih sederhana dibandingkan "StatefulWidget".

---

6. StatefulWidget

"StatefulWidget" digunakan ketika tampilan atau data widget dapat berubah selama aplikasi berjalan.

Contohnya adalah:

- Counter

- Checkbox

- Form input

- Animasi

- Tombol yang mengubah tampilan

Contoh sederhana:

class CounterWidget extends StatefulWidget {

  const CounterWidget({super.key});

  @override

  State<CounterWidget> createState() => _CounterWidgetState();

}

class _CounterWidgetState extends State<CounterWidget> {

  int counter = 0;

  void tambah() {

    setState(() {

      counter++;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Column(

      children: [

        Text('Nilai: $counter'),

        ElevatedButton(

          onPressed: tambah,

          child: const Text('Tambah'),

        ),

      ],

    );

  }

}

Ketika tombol ditekan, nilai "counter" berubah. "setState()" digunakan untuk memberi tahu Flutter bahwa tampilan perlu diperbarui.

---

7. Perbedaan StatelessWidget dan StatefulWidget

StatelessWidget| StatefulWidget

Tidak memiliki state yang berubah| Memiliki state yang dapat berubah

Cocok untuk tampilan tetap| Cocok untuk tampilan dinamis

Lebih sederhana| Memiliki objek State

Tidak menggunakan "setState()" untuk perubahan state| Dapat menggunakan "setState()"

Contoh: teks, ikon, tampilan sederhana| Contoh: counter, checkbox, form

Kesimpulan sederhana:

«Jika tampilan tidak perlu berubah berdasarkan state, gunakan "StatelessWidget". Jika tampilan perlu merespons perubahan state, gunakan "StatefulWidget".»

---

8. Widget Dasar yang Sering Digunakan

a. Text

Digunakan untuk menampilkan teks.

Text('Belajar Flutter')

b. Container

Digunakan sebagai wadah yang dapat diberi ukuran, warna, margin, padding, dan dekorasi.

Container(

  padding: const EdgeInsets.all(16),

  child: const Text('Hello'),

)

c. Center

Digunakan untuk menempatkan child di bagian tengah.

Center(

  child: Text('Tengah'),

)

d. Row

Digunakan untuk menyusun widget secara horizontal.

Row(

  children: [

    const Text('Nama:'),

    const Text('Andi'),

  ],

)

e. Column

Digunakan untuk menyusun widget secara vertikal.

Column(

  children: [

    const Text('Nama'),

    const Text('Alamat'),

  ],

)

f. Image

Digunakan untuk menampilkan gambar.

Image.network(

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

)

g. Icon

Digunakan untuk menampilkan ikon.

const Icon(Icons.home)

h. ElevatedButton

Digunakan untuk membuat tombol.

ElevatedButton(

  onPressed: () {

    print('Tombol ditekan');

  },

  child: const Text('Klik Saya'),

)

---

9. Scaffold

"Scaffold" merupakan widget yang menyediakan struktur dasar sebuah halaman aplikasi Material Design.

Contohnya:

Scaffold(

  appBar: AppBar(

    title: const Text('Belajar Flutter'),

  ),

  body: const Center(

    child: Text('Halo Dunia!'),

  ),

)

Bagian yang umum digunakan pada "Scaffold" antara lain:

- "appBar" → bagian atas aplikasi.

- "body" → isi utama halaman.

- "floatingActionButton" → tombol aksi mengambang.

- "drawer" → menu samping.

- "bottomNavigationBar" → navigasi bagian bawah.

---

10. Contoh Program Sederhana

Berikut contoh aplikasi Flutter sederhana yang menggunakan beberapa widget:

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: const Text('Belajar Widget'),

        ),

        body: Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              const Icon(

                Icons.school,

                size: 60,

              ),

              const SizedBox(height: 16),

              const Text(

                'Belajar Flutter',

                style: TextStyle(fontSize: 24),

              ),

              const SizedBox(height: 16),

              ElevatedButton(

                onPressed: () {

                  print('Tombol ditekan');

                },

                child: const Text('Mulai Belajar'),

              ),

            ],

          ),

        ),

      ),

    );

  }

}

Pada program tersebut terdapat beberapa widget:

MaterialApp

└── Scaffold

    ├── AppBar

    │ └── Text

    └── Center

        └── Column

            ├── Icon

            ├── SizedBox

            ├── Text

            ├── SizedBox

            └── ElevatedButton

                └── Text

---

11. Properti pada Widget

Widget biasanya memiliki berbagai properti untuk mengatur tampilannya.

Contoh:

Text(

  'Flutter',

  style: TextStyle(

    fontSize: 24,

    fontWeight: FontWeight.bold,

  ),

)

Pada contoh tersebut:

- "fontSize" mengatur ukuran teks.

- "fontWeight" mengatur ketebalan teks.

Contoh lainnya:

Container(

  width: 200,

  height: 100,

  padding: const EdgeInsets.all(16),

  child: const Text('Container'),

)

Properti dapat digunakan untuk mengatur ukuran, posisi, jarak, dan tampilan widget.

---

12. Child dan Children

Beberapa widget memiliki child, sedangkan widget lainnya memiliki children.

Menggunakan child

Biasanya digunakan jika widget hanya memiliki satu anak.

Center(

  child: Text('Halo'),

)

Menggunakan children

Digunakan jika widget dapat memiliki beberapa anak.

Column(

  children: [

    Text('Satu'),

    Text('Dua'),

    Text('Tiga'),

  ],

)

Perhatikan perbedaannya:

child → satu widget

children → beberapa widget

---

13. Build Method

Setiap widget yang menampilkan UI menggunakan method "build()" untuk menentukan tampilan yang akan dibuat.

Contoh:

@override

Widget build(BuildContext context) {

  return const Text('Hello Flutter');

}

Method "build()" mengembalikan sebuah widget.

Jadi, secara sederhana:

build()

   ↓

menghasilkan Widget

   ↓

Widget ditampilkan pada layar

---

14. Kelebihan Konsep Widget

Penggunaan widget membuat pengembangan aplikasi Flutter menjadi lebih terstruktur.

Beberapa manfaatnya:

1. Reusable — widget dapat digunakan kembali.

2. Terstruktur — UI dapat dibagi menjadi komponen-komponen kecil.

3. Mudah dikembangkan — perubahan pada satu bagian dapat dilakukan pada widget terkait.

4. Mudah dipahami — struktur aplikasi dapat dilihat melalui widget tree.

5. Mendukung UI dinamis — StatefulWidget dapat digunakan untuk menangani perubahan state.

---

15. Kesalahan yang Sering Terjadi

Beberapa kesalahan umum saat belajar widget Flutter:

1. Lupa menggunakan "child" atau "children"

Contoh yang benar:

Center(

  child: Text('Hello'),

)

2. Menggunakan "children" untuk widget yang hanya menerima "child"

Setiap widget memiliki properti yang berbeda. Dokumentasi widget perlu diperhatikan.

3. Tidak memahami perbedaan Stateless dan Stateful

Gunakan StatelessWidget untuk tampilan yang tidak membutuhkan perubahan state dan StatefulWidget ketika state perlu berubah.

4. Terlalu banyak widget dalam satu file

Jika aplikasi sudah besar, widget dapat dipecah menjadi beberapa widget agar kode lebih mudah dipelihara.

---

16. Latihan

Latihan 1 — Mengenal Widget

Sebutkan fungsi dari widget berikut:

1. "Text"

2. "Container"

3. "Center"

4. "Row"

5. "Column"

6. "Icon"

7. "ElevatedButton"

8. "Scaffold"

Latihan 2 — Membuat Tampilan

Buat sebuah halaman Flutter yang memiliki:

- AppBar dengan judul Profil Saya

- Icon di tengah

- Nama pengguna

- Deskripsi singkat

- Tombol Edit Profil

Gunakan minimal:

- "Scaffold"

- "AppBar"

- "Column"

- "Icon"

- "Text"

- "ElevatedButton"

Latihan 3 — StatefulWidget

Buat aplikasi counter sederhana yang memiliki:

- Angka awal "0"

- Tombol Tambah

- Setiap tombol ditekan, angka bertambah 1.

---

17. Rangkuman

Widget merupakan fondasi utama dalam Flutter. Tampilan aplikasi dibangun dengan menyusun berbagai widget menjadi sebuah widget tree.

Konsep penting yang perlu diingat:

«Flutter UI = kumpulan widget yang disusun menjadi sebuah struktur.»

Beberapa widget dasar yang penting dipahami adalah "Text", "Container", "Center", "Row", "Column", "Icon", "ElevatedButton", dan "Scaffold".

Selain itu, terdapat dua jenis widget utama:

- StatelessWidget → untuk UI yang tidak membutuhkan perubahan state.

- StatefulWidget → untuk UI yang dapat berubah berdasarkan state.

Dengan memahami widget, widget tree, properties, "child", "children", serta perbedaan StatelessWidget dan StatefulWidget, dasar pengembangan UI menggunakan Flutter akan menjadi jauh lebih mudah.