Menguasai Widget Flutter: Jenis, Fungsi, dan Contohnya untuk Pemula

Setelah memahami struktur project Flutter pada Level 4, sekarang waktunya masuk ke salah satu konsep paling penting dalam pengembangan aplikasi Flutter: widget Flutter.

Jika Anda baru belajar Flutter, hampir semua kode yang ditemui akan berhubungan dengan widget.

Tampilan teks menggunakan widget. Tombol menggunakan widget. Gambar menggunakan widget. Layout menggunakan widget. Bahkan struktur utama sebuah aplikasi Flutter juga dibangun menggunakan widget.

Inilah alasan mengapa Flutter sering dikenal dengan konsep “everything is a widget.”

Namun, menghafalkan nama widget saja tidak cukup.

Developer Flutter perlu memahami bagaimana widget bekerja, bagaimana widget disusun menjadi widget tree, kapan menggunakan StatelessWidget atau StatefulWidget, bagaimana widget menerima data, serta bagaimana beberapa widget kecil dapat dikombinasikan menjadi komponen UI yang lebih kompleks.

Flutter sendiri menjelaskan bahwa runApp() menerima sebuah widget dan menjadikannya root dari widget tree aplikasi. Widget kemudian dapat membangun widget-widget lain secara rekursif hingga membentuk antarmuka aplikasi.

Pada artikel ini, kita akan mempelajari konsep widget Flutter tersebut secara bertahap.

Dimana materi menguasai widget Flutter ini merupakan pembelajaran Level 5 dari Roadmap Belajar Flutter dari Nol Sampai Siap Kerja yang dibahas pada situs Raja Putra Media.

Apa Itu Widget Flutter?

Secara sederhana, widget Flutter adalah komponen yang digunakan untuk mendeskripsikan bagian dari tampilan dan perilaku UI aplikasi.

Contohnya:

Text('Hello Flutter')

adalah widget untuk menampilkan teks.

Sedangkan:

Icon(Icons.home)

digunakan untuk menampilkan ikon.

Dan:

ElevatedButton(
  onPressed: () {},
  child: const Text('Klik'),
)

merupakan widget tombol yang di dalamnya juga terdapat widget Text.

Jadi, widget tidak selalu berdiri sendiri. Satu widget dapat memiliki widget lain sebagai child atau children.

Contohnya:

Scaffold
 └── Column
      ├── Text
      ├── Image
      └── ElevatedButton

Struktur seperti inilah yang disebut widget tree.

Flutter membangun UI dengan pendekatan deklaratif. Developer mendeskripsikan seperti apa UI yang diinginkan berdasarkan kondisi atau data tertentu, kemudian framework menangani proses pembaruan tampilan tersebut.

Memahami Widget Tree

Widget tree merupakan konsep yang wajib dipahami sebelum Anda semakin jauh belajar Flutter.

Bayangkan sebuah halaman aplikasi sederhana yang memiliki:

• AppBar
• judul
• gambar
• deskripsi
• tombol

Secara konseptual, struktur tersebut dapat terlihat seperti:

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text
    │
    └── body
        └── Column
            ├── Image
            ├── Text
            ├── Text
            └── ElevatedButton

Setiap bagian dari UI direpresentasikan sebagai widget.

Misalnya:

Scaffold(
  appBar: AppBar(
    title: const Text('Profil'),
  ),
  body: Column(
    children: [
      const Text('Raja Putra Media'),
      ElevatedButton(
        onPressed: () {},
        child: const Text('Lihat Profil'),
      ),
    ],
  ),
)

Di dalam kode tersebut terdapat beberapa widget yang disusun secara bertingkat.

Scaffold memiliki AppBar dan body.

AppBar memiliki Text.

body berisi Column.

Column memiliki Text dan ElevatedButton.

Kemudian ElevatedButton juga memiliki Text.

Inilah cara berpikir yang perlu mulai dibangun ketika belajar Flutter:

Jangan melihat UI sebagai satu halaman besar. Pecah UI menjadi kumpulan widget kecil.

Flutter juga merekomendasikan pendekatan pemecahan UI menjadi widget-widget yang lebih kecil karena setiap bagian dapat memiliki tanggung jawab yang lebih jelas dan lebih mudah dikelola.

Widget child dan children

Salah satu hal yang sering membingungkan pemula adalah perbedaan antara child dan children.

child

child digunakan ketika sebuah widget menerima satu widget anak.

Contohnya:

Center(
  child: Text('Hello'),
)

Center hanya memiliki satu child.

Contoh lainnya:

Container(
  child: Text('Flutter'),
)

children

Sementara itu, children digunakan ketika widget dapat memiliki banyak widget anak.

Contohnya:

Column(
  children: [
    Text('Nama'),
    Text('Email'),
    Text('Alamat'),
  ],
)

Column memiliki tiga child.

Secara sederhana:

child
└── satu widget

children
├── widget 1
├── widget 2
└── widget 3

Memahami perbedaan ini akan membuat Anda lebih mudah membaca kode Flutter.

StatelessWidget vs StatefulWidget

Setelah memahami widget tree, konsep berikutnya yang sangat penting adalah perbedaan:

• StatelessWidget
• StatefulWidget

Keduanya akan sangat sering digunakan dalam project Flutter.

Apa Itu StatelessWidget?

StatelessWidget digunakan ketika bagian UI yang dibuat tidak membutuhkan mutable state internal.

Flutter API menjelaskan bahwa StatelessWidget cocok ketika tampilan dapat ditentukan berdasarkan konfigurasi widget dan BuildContext, tanpa membutuhkan state yang berubah sepanjang hidup widget tersebut.

Contoh sederhana:

class Greeting extends StatelessWidget {
  const Greeting({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text(
      'Hello Flutter',
    );
  }
}

Widget tersebut hanya menampilkan teks. Tidak ada nilai internal yang perlu berubah. Karena itu, StatelessWidget sudah cukup.

Contoh StatelessWidget dengan Parameter

Stateless widget juga dapat menerima data dari parent.

Contohnya:

class UserName extends StatelessWidget {
  const UserName({
    required this.name,
    super.key,
  });

  final String name;

  @override
  Widget build(BuildContext context) {
    return Text(
      'Halo, $name',
    );
  }
}

Kemudian digunakan:

UserName(
  name: 'Andi',
)

Hasilnya:

Halo, Andi

Konsep seperti ini sangat penting dalam Flutter karena memungkinkan kita membuat widget yang reusable.

Daripada menulis UI yang sama berulang kali, buat sebuah widget dan berikan data yang berbeda melalui constructor.

Apa Itu StatefulWidget?

Berbeda dengan StatelessWidget, StatefulWidget digunakan ketika UI perlu merespons perubahan state selama widget tersebut digunakan.

Contohnya:

• counter bertambah
• checkbox berubah
• slider berubah
• tombol favorit aktif/nonaktif
• input pengguna berubah
• loading berubah menjadi hasil data

Flutter menjelaskan bahwa StatefulWidget sendiri bersifat immutable, sementara data yang dapat berubah disimpan pada objek State. Ketika state berubah, setState() memberi tahu framework bahwa UI perlu dibangun kembali.

Contoh sederhana:

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: increment,
          child: const Text('Tambah'),
        ),
      ],
    );
  }
}

Ketika tombol ditekan:

count++;

mengubah nilai state.

Kemudian:

setState(() {
  count++;
});

memberi tahu Flutter bahwa UI perlu diperbarui.

Kapan Menggunakan StatelessWidget?

Gunakan StatelessWidget jika widget tidak perlu menyimpan state yang berubah secara internal.

Contohnya:

• judul
• label
• ikon
• kartu informasi
• logo
• komponen dekoratif
• tampilan berdasarkan parameter yang diberikan parent

Contoh:

class ProductTitle extends StatelessWidget {
  const ProductTitle({
    required this.title,
    super.key,
  });

  final String title;

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

Kapan Menggunakan StatefulWidget?

Gunakan StatefulWidget ketika tampilan atau data perlu berubah selama widget hidup.

Contohnya:

User klik tombol
       ↓
State berubah
       ↓
setState()
       ↓
build()
       ↓
UI diperbarui

Flutter memberikan contoh seperti Checkbox, Radio, Slider, Form, dan TextField sebagai widget yang dapat bersifat stateful atau memiliki perilaku dinamis.

Yang perlu dipahami:

Jangan menggunakan StatefulWidget hanya karena sebuah widget memiliki tombol.

Yang menentukan adalah apakah ada state yang berubah dan perubahan tersebut harus tercermin pada UI.

Mengenal BuildContext

Saat membuat widget, Anda akan sering melihat kode:

@override
Widget build(BuildContext context)

Pertanyaannya:

Apa sebenarnya BuildContext?

BuildContext dapat dipahami sebagai representasi lokasi sebuah widget di dalam widget tree.

Flutter API mendefinisikannya sebagai handle ke lokasi widget di dalam widget tree. BuildContext juga digunakan oleh berbagai API seperti Theme.of(context) dan showDialog(...).

Contohnya:

@override
Widget build(BuildContext context) {
  return Text(
    'Hello Flutter',
  );
}

Anda mungkin belum menggunakan context secara langsung.

Namun nanti Anda akan sering menemukannya ketika menggunakan:

Theme.of(context)

atau:

Navigator.of(context)

atau:

MediaQuery.of(context)

serta:

ScaffoldMessenger.of(context)

Karena itu, jangan menganggap BuildContext sebagai parameter yang hanya perlu ditulis agar kode bisa berjalan.

context akan menjadi bagian penting dalam pengembangan Flutter.

Mengenal Widget Dasar Flutter

Setelah memahami konsep dasarnya, sekarang waktunya mengenal beberapa widget yang paling sering digunakan.

1. MaterialApp

MaterialApp biasanya digunakan sebagai root aplikasi berbasis Material Design.

Contohnya:

MaterialApp(
  home: Scaffold(
    body: Center(
      child: Text('Hello Flutter'),
    ),
  ),
)

Pada contoh tersebut:

MaterialApp
└── Scaffold
    └── Center
        └── Text

2. Scaffold

Scaffold menyediakan struktur dasar halaman aplikasi Material.

Contohnya:

Scaffold(
  appBar: AppBar(
    title: const Text('Home'),
  ),
  body: const Center(
    child: Text('Selamat Datang'),
  ),
)

Beberapa bagian yang umum digunakan:

Scaffold
├── appBar
├── body
├── drawer
├── floatingActionButton
└── bottomNavigationBar

Untuk pemula, Scaffold akan menjadi salah satu widget yang sangat sering ditemui.

3. Container

Container merupakan widget serbaguna untuk mengatur ukuran, padding, margin, alignment, decoration, dan berbagai kebutuhan layout lainnya.

Contoh:

Container(
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.all(10),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text(
    'Belajar Flutter',
  ),
)

Namun jangan berpikir bahwa semua layout harus menggunakan Container.

Sering kali widget yang lebih spesifik seperti Padding, SizedBox, Align, atau DecoratedBox lebih tepat digunakan.

4. Text

Text digunakan untuk menampilkan teks.

Contoh sederhana:

const Text(
  'Belajar Flutter',
)

Anda juga dapat memberikan style:

Text(
  'Belajar Flutter',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

Widget Text sangat sering muncul dalam hampir semua halaman aplikasi.

5. Image

Untuk menampilkan gambar dari asset:

Image.asset(
  'assets/images/logo.png',
)

Sedangkan untuk gambar dari internet:

Image.network(
  'https://example.com/image.jpg',
)

Penggunaan asset perlu didaftarkan pada pubspec.yaml, sebagaimana dibahas pada Level 4.

6. Icon

Untuk menampilkan ikon:

const Icon(
  Icons.home,
)

Contoh:

Row(
  children: [
    const Icon(Icons.email),
    const SizedBox(width: 8),
    const Text('Email'),
  ],
)

7. Row

Row digunakan untuk menyusun widget secara horizontal.

Contoh:

Row(
  children: [
    const Icon(Icons.home),
    const SizedBox(width: 8),
    const Text('Home'),
  ],
)

Strukturnya:

Icon → SizedBox → Text

dari kiri ke kanan.

8. Column

Column digunakan untuk menyusun widget secara vertikal.

Column(
  children: [
    const Text('Nama'),
    const Text('Email'),
    const Text('Nomor Telepon'),
  ],
)

Hasil konseptualnya:

Nama
Email
Nomor Telepon

Row dan Column adalah dua widget layout yang sangat penting dalam Flutter. Dokumentasi resmi Flutter memasukkannya ke dalam kategori layout widgets bersama Stack, ListView, GridView, Expanded, Wrap, dan widget layout lainnya.

9. Center

Center digunakan untuk menempatkan child di tengah area yang tersedia.

Center(
  child: Text('Hello'),
)

Widget ini sangat berguna ketika Anda ingin membuat tampilan sederhana dengan posisi terpusat.

10. Padding

Daripada menggunakan Container hanya untuk memberikan padding, Anda dapat menggunakan:

Padding(
  padding: const EdgeInsets.all(16),
  child: Text('Flutter'),
)

Ini membuat maksud kode lebih jelas.

11. SizedBox

SizedBox sering digunakan untuk memberikan ukuran atau jarak.

Contoh:

const SizedBox(height: 16)

Untuk memberikan jarak horizontal:

const SizedBox(width: 12)

Contohnya:

Column(
  children: [
    const Text('Judul'),
    const SizedBox(height: 16),
    const Text('Deskripsi'),
  ],
)

12. Expanded

Expanded sangat berguna ketika Anda bekerja dengan Row atau Column.

Contoh:

Row(
  children: [
    Expanded(
      child: Container(
        height: 100,
      ),
    ),
    const SizedBox(width: 16),
    Expanded(
      child: Container(
        height: 100,
      ),
    ),
  ],
)

Expanded memungkinkan child menggunakan ruang yang tersedia dalam flex layout.

13. Stack

Stack digunakan ketika beberapa widget perlu ditumpuk atau saling overlap.

Contoh:

Stack(
  children: [
    Image.asset('assets/banner.jpg'),
    const Positioned(
      bottom: 16,
      left: 16,
      child: Text('Flutter'),
    ),
  ],
)

Struktur:

Stack
├── Image
└── Positioned
    └── Text

Stack cocok digunakan untuk:

• badge
• overlay teks
• tombol di atas gambar
• dekorasi
• floating element

14. ListView

Ketika Anda memiliki daftar data yang panjang dan perlu di-scroll, ListView menjadi salah satu widget penting.

Contoh:

ListView(
  children: const [
    ListTile(
      title: Text('Produk 1'),
    ),
    ListTile(
      title: Text('Produk 2'),
    ),
    ListTile(
      title: Text('Produk 3'),
    ),
  ],
)

Flutter mendeskripsikan ListView sebagai layout scrollable linear dan merupakan salah satu widget scrolling yang paling umum digunakan.

Nantinya, ketika jumlah data berasal dari API atau database, Anda akan lebih sering menggunakan pola seperti:

ListView.builder(...)

Pembahasan lebih dalam mengenai data dinamis akan berkaitan dengan materi selanjutnya dalam roadmap.

Memahami Layout dan Constraints

Ada satu konsep yang sering membuat pemula bingung: constraints.

Secara sederhana, parent memberikan batasan kepada child mengenai ruang yang tersedia.

Konsep ini dapat diringkas:

Parent memberi constraints
        ↓
Child memilih ukuran
        ↓
Parent menentukan posisi child

Flutter menggunakan sistem layout berbasis constraints untuk menentukan ukuran dan posisi widget. Row, Column, ListView, dan widget lainnya dapat berperilaku berbeda bergantung pada constraints yang diterimanya.

Karena itu, ketika Anda menemukan error seperti:

RenderFlex overflowed

atau:

BoxConstraints forces an infinite width

jangan langsung menganggap widget tersebut rusak.

Sering kali masalahnya adalah struktur layout dan constraints yang diberikan kepada widget.

Membuat Custom Widget

Salah satu kemampuan yang perlu mulai dikuasai pada Level 5 adalah membuat widget sendiri. Misalnya Anda memiliki kartu produk.

Daripada menulis:

Container(...)

berulang kali, buat:

class ProductCard extends StatelessWidget {
  const ProductCard({
    required this.name,
    required this.price,
    super.key,
  });

  final String name;
  final String price;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(name),
        subtitle: Text(price),
      ),
    );
  }
}

Kemudian gunakan:

Column(
  children: [
    ProductCard(
      name: 'Laptop',
      price: 'Rp10.000.000',
    ),
    ProductCard(
      name: 'Keyboard',
      price: 'Rp500.000',
    ),
  ],
)

Pendekatan seperti ini membuat kode lebih mudah digunakan kembali.

Mengapa Widget Sebaiknya Dipecah?

Bayangkan Anda membuat halaman dashboard dengan 500 baris kode dalam satu build(). Pada awalnya mungkin masih bisa berjalan.

Namun semakin besar aplikasi, semakin sulit untuk:

• membaca kode
• mencari bug
• mengubah UI
• menggunakan kembali komponen
• bekerja bersama developer lain

Sebaliknya:

DashboardPage
├── Header
├── SummaryCard
├── StatisticCard
├── RecentTransaction
└── BottomNavigation

Setiap bagian dapat dibuat sebagai widget terpisah.

Flutter sendiri mendorong pemecahan UI menjadi widget karena widget merupakan unit dasar penyusun interface dan memungkinkan bagian UI dikembangkan secara lebih terstruktur.

Composition: Kunci Membuat UI Flutter

Flutter sangat mengandalkan composition.

Daripada membuat komponen UI yang terlalu besar, Anda dapat menyusun widget-widget kecil menjadi widget yang lebih kompleks.

Misalnya:

ProfileCard
├── Padding
│   └── Row
│       ├── CircleAvatar
│       └── Column
│           ├── Text
│           └── Text

Kemudian:

ProfilePage
├── AppBar
├── ProfileCard
├── ActionButton
└── PostList

Dengan pendekatan ini, UI menjadi seperti kumpulan blok LEGO.

Anda membuat komponen kecil terlebih dahulu, kemudian menggabungkannya menjadi fitur yang lebih besar.

Contoh Mini Project Widget

Sekarang kita gabungkan beberapa konsep.

Buat aplikasi sederhana:

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('Profil'),
        ),
        body: const ProfilePage(),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          const CircleAvatar(
            radius: 50,
            child: Icon(Icons.person),
          ),
          const SizedBox(height: 16),
          const Text(
            'Andi',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 8),
          const Text(
            'Flutter Developer',
          ),
          const SizedBox(height: 24),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Follow'),
          ),
        ],
      ),
    );
  }
}

Jika diuraikan menjadi widget tree:

MyApp
└── MaterialApp
    └── Scaffold
        ├── AppBar
        │   └── Text
        │
        └── ProfilePage
            └── Padding
                └── Column
                    ├── CircleAvatar
                    ├── SizedBox
                    ├── Text
                    ├── SizedBox
                    ├── Text
                    ├── SizedBox
                    └── ElevatedButton
                        └── Text

Jika Anda sudah dapat membaca struktur seperti ini, pemahaman Flutter Anda mulai berkembang dengan baik.

Kesalahan Umum Pemula Saat Belajar Widget

1. Menghafalkan widget tanpa memahami konsep

Jangan hanya menghafalkan:

Container
Row
Column
Stack
ListView

Yang lebih penting adalah memahami kapan dan mengapa widget tersebut digunakan.

2. Semua UI dibuat dalam satu widget

Misalnya satu file berisi ratusan atau ribuan baris kode.

Lebih baik mulai memecah komponen ketika sebuah bagian UI memiliki tanggung jawab yang jelas.

3. Menggunakan Container untuk semuanya

Container memang fleksibel, tetapi bukan berarti harus digunakan untuk setiap kebutuhan layout. Gunakan widget yang paling sesuai dengan tujuan.

Contoh:

Padding(...)

untuk padding.

SizedBox(...)

untuk ukuran atau spacing.

Center(...)

untuk centering.

Align(...)

untuk alignment.

Kode yang spesifik biasanya lebih mudah dibaca.

4. Menggunakan StatefulWidget tanpa kebutuhan state

Tidak semua widget harus stateful.

Jika UI hanya menampilkan data yang diberikan parent, StatelessWidget biasanya sudah cukup.

5. Mengabaikan constraints

Ketika menggunakan Row, Column, Expanded, ListView, dan Stack, perhatikan ruang yang tersedia.

Masalah layout Flutter sering kali bukan disebabkan oleh widget yang salah, melainkan oleh kombinasi constraints yang tidak sesuai.

Tips Belajar Widget Flutter Lebih Cepat

Jangan mencoba menghafalkan seluruh widget yang tersedia di Flutter.

Jumlah widget sangat banyak. Lebih efektif jika Anda menguasai kelompok widget yang paling sering digunakan terlebih dahulu.

Kelompok dasar

Text
Icon
Image
Container
Padding
SizedBox
Center
Align

Kelompok layout

Row
Column
Stack
Expanded
Flexible
Wrap

Kelompok scrolling

ListView
GridView
SingleChildScrollView

Kelompok input

TextField
Checkbox
Radio
Switch
Slider

Kelompok tombol

ElevatedButton
TextButton
OutlinedButton
IconButton

Struktur aplikasi

MaterialApp
Scaffold
AppBar
Drawer
BottomNavigationBar

Setelah memahami kategori tersebut, Anda akan lebih mudah mencari widget yang tepat ketika membangun aplikasi nyata.

Latihan Level 5

Agar pemahaman tidak berhenti pada teori, buatlah sebuah aplikasi profil sederhana.

Target tampilannya:

-------------------------
|       Profil          |
-------------------------

        [ Avatar ]

       Nama Pengguna
       Flutter Developer

   [ Edit Profil ]

-------------------------
|  Tentang Saya        |
-------------------------

Saya sedang belajar
membangun aplikasi
dengan Flutter.

-------------------------
|      Skills          |
-------------------------

Flutter   Dart   Git

Cobalah menggunakan:

• Scaffold
• AppBar
• Column
• Row
• Container
• Padding
• SizedBox
• CircleAvatar
• Text
• Icon
• ElevatedButton
• custom StatelessWidget

Kemudian pecah halaman tersebut menjadi beberapa widget.

Misalnya:

ProfilePage
├── ProfileHeader
├── ProfileAction
├── AboutSection
└── SkillSection

Tujuan latihan ini bukan membuat aplikasi yang sempurna.

Tujuannya adalah membiasakan diri berpikir dalam bentuk widget.

Checklist Setelah Menyelesaikan Level 5

Sebelum melanjutkan ke Level 6, pastikan Anda sudah memahami:

• Apa itu widget Flutter
• Apa itu widget tree
• Perbedaan child dan children
• Cara kerja build()
• Fungsi BuildContext
• Perbedaan StatelessWidget dan StatefulWidget
• Fungsi setState()
• Cara menggunakan MaterialApp
• Cara menggunakan Scaffold
• Fungsi Container
• Fungsi Row
• Fungsi Column
• Fungsi Stack
• Fungsi Expanded
• Fungsi ListView
• Konsep dasar constraints
• Cara membuat custom widget
• Konsep widget composition
• Cara memecah UI menjadi beberapa widget

Jika sebagian besar poin tersebut sudah Anda pahami, Anda sudah siap melanjutkan ke materi berikutnya.

Apa yang Dipelajari Setelah Menguasai Widget Flutter?

Setelah memahami widget, tantangan berikutnya adalah membuat UI yang tidak hanya terlihat bagus di satu ukuran layar. Aplikasi mobile dapat digunakan pada berbagai ukuran perangkat.

Misalnya:

Small Phone
     ↓
Large Phone
     ↓
Tablet
     ↓
Desktop

Jika UI dibuat tanpa mempertimbangkan ukuran layar, layout dapat mengalami:

• overflow
• teks terpotong
• tombol terlalu besar
• jarak tidak proporsional
• layout berantakan pada tablet
• komponen tidak responsif

Karena itu, setelah memahami widget dan layout dasar, roadmap akan berlanjut ke:

Level 6 — Responsive UI Flutter

Pada Level 6, pembahasan akan berfokus pada bagaimana menggunakan widget-widget yang sudah dipelajari untuk membuat interface yang mampu beradaptasi dengan berbagai ukuran layar.

Anda akan mulai mempelajari konsep seperti:

• responsive design
• adaptive layout
• MediaQuery
• LayoutBuilder
• Expanded
• Flexible
• FractionallySizedBox
• Wrap
• breakpoint
• responsive navigation
• layout mobile dan tablet
• adaptive UI

Dengan kata lain, Level 5 mengajarkan bagaimana menyusun UI menggunakan widget, sedangkan Level 6 mengajarkan bagaimana membuat UI tersebut mampu beradaptasi terhadap ukuran layar.

Kesimpulan

Widget merupakan fondasi utama dalam pengembangan aplikasi Flutter. Hampir setiap bagian interface dibangun menggunakan widget, mulai dari teks sederhana hingga halaman aplikasi yang kompleks.

Hal terpenting yang perlu dikuasai pada tahap ini bukan sekadar menghafalkan nama widget, tetapi memahami cara berpikir Flutter:

Widget
   ↓
Widget Tree
   ↓
Composition
   ↓
Layout
   ↓
State
   ↓
Interactive UI

Mulailah dari widget sederhana seperti:

Text
Icon
Image
Container
Padding

kemudian lanjutkan ke widget layout:

Row
Column
Stack
Expanded
ListView

Setelah itu, biasakan membuat custom widget agar kode aplikasi lebih modular dan reusable.

Pahami juga perbedaan StatelessWidget dan StatefulWidget. Gunakan StatelessWidget ketika UI tidak membutuhkan mutable state internal, sedangkan StatefulWidget digunakan ketika UI perlu merespons perubahan state. Flutter memisahkan objek widget yang bersifat immutable dari objek State yang menyimpan data mutable agar state dapat dipertahankan di antara proses rebuild.

Dan yang tidak kalah penting, mulai biasakan membaca UI sebagai widget tree, bukan sebagai satu blok kode besar.

Ketika kemampuan ini sudah terbentuk, Anda akan lebih mudah memahami aplikasi Flutter yang dibuat orang lain maupun membangun project Anda sendiri.

Selanjutnya, kita akan masuk ke Level 6 — Responsive UI Flutter, yaitu tahap untuk membuat tampilan aplikasi yang mampu menyesuaikan diri dengan berbagai ukuran dan bentuk layar.