Belajar Flutter dari Awal: Memahami Widget Dasar dan Struktur Aplikasi (Part 2)

Rifqi An Rifqi An
•
Februari 23, 2026

Memahami Widget Dasar dan Struktur Aplikasi (Part 2): Melaju Lebih Jauh dengan Flutter!

Halo sobat ngoding dan pejuang keyboard! Balik lagi bareng aku di seri tutorial Belajar Flutter dari Awal. Setelah di Part 1 kita sedikit kenalan dengan Flutter dan konsep widget, kali ini kita bakal ngegas lebih dalam lagi. Siap-siap, karena kita bakal mulai "membangun" aplikasi beneran, meski masih sederhana!

Anggap aja ini persiapan buat lembur ngopi sambil mikirin kenapa kode kita kok ya gitu-gitu aja, padahal cuma ganti warna doang. Receh ya? Tapi itulah seninya ngoding, bro!

Daftar Isi

Memulai Petualangan Kita di Part 2

Di Part 1, kita udah nyenggol dikit tentang apa itu widget, dan bedanya StatelessWidget sama StatefulWidget. Intinya, kalau aplikasi kamu cuma nampilin sesuatu yang statis, pakai StatelessWidget. Kalau ada interaksi, ada perubahan tampilan, ya pakai StatefulWidget. Gampang kan?

Nah, sekarang kita nggak cuma teori, tapi langsung praktik gimana sih aplikasi Flutter itu "dibangun" dari widget-widget dasar yang paling sering dipakai.

MaterialApp dan Scaffold: Fondasi Utama Aplikasi

Anggap aja kita lagi mau bangun rumah. MaterialApp itu kayak izin pembangunan dan desain arsitektur utamanya. Sedangkan Scaffold itu fondasi, tembok, atap, dan rangka-rangka dasarnya. Tanpa dua ini, dijamin aplikasi kita bakal ambyar!

MaterialApp: Gerbang Utama Aplikasi

Setiap aplikasi Flutter yang mengikuti desain Material Design (desain standar dari Google) pasti diawali dengan MaterialApp. Widget ini menyediakan fungsionalitas dasar seperti navigasi, tema, dan hal-hal umum lainnya yang dibutuhkan sebuah aplikasi.

Bayangkan ini sebagai gerbang masuk aplikasi kamu. Di sinilah kamu bisa tentuin judul aplikasi, tema warna (biar nggak norak warnanya), dan halaman pertama yang bakal muncul. Parameter paling penting yang sering kita pakai di MaterialApp adalah home, yang isinya adalah widget halaman pertama aplikasi kita.

Scaffold: Kerangka Bangun Aplikasi Kita

Setelah ada MaterialApp, di dalamnya kita biasanya taro Scaffold. Scaffold ini ibarat kerangka bangunan utama sebuah halaman. Dia menyediakan slot-slot standar untuk elemen-elemen UI yang umum, seperti:

  • appBar: Bar di bagian atas, biasanya buat judul halaman atau tombol navigasi.
  • body: Area utama konten halaman. Di sinilah mayoritas widget kita diletakkan.
  • floatingActionButton: Tombol melayang yang biasanya punya aksi utama.
  • bottomNavigationBar: Bar navigasi di bagian bawah layar.
  • Dan banyak lagi!

Tanpa Scaffold, kamu bakal pusing sendiri gimana caranya naro AppBar atau FloatingActionButton di posisi yang benar. Scaffold ini hero kita!

Oke, mari kita lihat gimana sih bentuk kodingan awal aplikasi kita dengan dua widget ini. Ini adalah boilerplate yang paling sering kamu temui:


import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // Jalankan aplikasi kita!
}

// Ini adalah StatelessWidget karena aplikasinya statis banget, cuma nampilin teks
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Pertamaku di Part 2', // Judul aplikasi, muncul di task switcher
      theme: ThemeData(
        primarySwatch: Colors.deepPurple, // Tema warna ungu kece!
      ),
      home: Scaffold( // Ini kerangka halaman pertama kita
        appBar: AppBar( // AppBar di bagian atas
          title: const Text('Flutter Keren Part 2'),
        ),
        body: const Center( // Konten utama halaman, kita taruh di tengah
          child: Text(
            'Halo Dunia Flutter!',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

Coba deh copas kode di atas ke main.dart kamu, terus jalankan! Harusnya muncul teks "Halo Dunia Flutter!" di tengah layar dengan app bar warna ungu. Gampang kan? Padahal tadi udah deg-degan mau ngoding. Hehe.

Widget-Widget Penting yang Sering Dipakai

Sekarang kita bakal kenalan sama widget-widget yang paling sering banget kamu pakai di dalam body-nya Scaffold. Ini adalah "batu bata" dasar buat bangun UI.

Text: Si Tukang Ngomong

Widget Text itu fungsinya ya cuma buat nampilin teks. Sesimpel itu. Tapi dia punya banyak parameter buat ngatur tampilan teksnya, seperti warna, ukuran, font, gaya, dll.


Text(
  'Ini adalah teks biasa',
  style: TextStyle(
    color: Colors.blueAccent, // Warna biru biar adem
    fontSize: 18, // Ukuran font
    fontStyle: FontStyle.italic, // Gaya miring
    fontWeight: FontWeight.w700, // Tebal banget
  ),
),

Kalo cuma Text('Halo') tanpa style juga nggak masalah. Dia bakal pakai gaya default. Tapi ya, kadang kita pengen tampilannya lebih "wah" dikit.

Center: Tukang Posisikan di Tengah

Sesuai namanya, Center widget ini fungsinya buat naro widget anaknya (child) di tengah-tengah area yang tersedia. Berguna banget kalau kamu cuma pengen nampilin satu elemen di tengah layar.


Center(
  child: Text('Aku di tengah!', style: TextStyle(fontSize: 20)),
),

Kamu udah lihat contohnya di kode MyApp di atas kan? Jadi udah kebayang lah fungsinya.

Column dan Row: Tukang Susun Baris dan Kolom

Ini adalah dua widget paling fundamental buat layouting di Flutter. Mereka ibarat mandor bangunan yang ngatur penempatan widget-widget lain:

  • Column: Menyusun widget secara vertikal (ke bawah), satu di bawah yang lain.
  • Row: Menyusun widget secara horizontal (ke samping), satu di samping yang lain.

Kedua widget ini punya parameter children (perhatikan pakai 's' ya, bukan child) yang isinya adalah List<Widget>. Jadi kamu bisa taro banyak widget di dalamnya.

Contoh Column:


// Ganti body di kode MyApp kamu dengan ini
body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center, // Atur posisi vertikal di tengah
    crossAxisAlignment: CrossAxisAlignment.center, // Atur posisi horizontal di tengah
    children: const <Widget>[ // Ini daftar widget anaknya
      Text('Widget Pertama', style: TextStyle(fontSize: 20)),
      SizedBox(height: 10), // Memberi jarak antar widget
      Text('Widget Kedua', style: TextStyle(fontSize: 18, color: Colors.green)),
      SizedBox(height: 10),
      Text('Widget Ketiga', style: TextStyle(fontSize: 16, fontStyle: FontStyle.italic)),
    ],
  ),
),

Parameter mainAxisAlignment dan crossAxisAlignment itu penting banget buat ngatur posisi dan penyebaran widget di dalam Column atau Row. Jangan sampai salah! Kalau di Column, mainAxisAlignment itu vertikal, kalau Row dia horizontal. Kebalikannya untuk crossAxisAlignment.

Contoh Row:


// Atau kalau mau nyoba Row, ganti body-nya jadi ini
body: Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, // Bagi rata jarak antar widget
    children: const <Widget>[
      Icon(Icons.thumb_up, color: Colors.blue, size: 30), // Icon jempol
      Text('LIKE', style: TextStyle(fontSize: 20)),
      SizedBox(width: 20), // Memberi jarak
      Icon(Icons.share, color: Colors.red, size: 30), // Icon share
      Text('BAGIKAN', style: TextStyle(fontSize: 20)),
    ],
  ),
),

Keren kan? Dengan Column dan Row, kamu bisa bikin layout yang kompleks. Kombinasi keduanya bakal sering banget kamu pakai sampai hapal di luar kepala!

ElevatedButton: Si Tombol Sakti

Aplikasi tanpa tombol itu kayak sayur tanpa garam. Hambar! ElevatedButton adalah salah satu jenis tombol paling umum di Flutter. Dia punya efek elevasi (terangkat) yang kece.

Yang paling penting dari tombol adalah parameternya onPressed. Ini adalah fungsi yang akan dipanggil saat tombolnya dipencet. Kalau onPressed-nya null, tombolnya bakal disabled (tidak bisa dipencet).


// Contoh penggunaan ElevatedButton
ElevatedButton(
  onPressed: () {
    // Aksi yang dilakukan saat tombol dipencet
    print('Tombol dipencet nih!'); // Ini akan muncul di console debug
  },
  child: const Text('Pencet Aku!'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.teal, // Warna background tombol
    foregroundColor: Colors.white, // Warna teks tombol
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15), // Padding tombol
    textStyle: const TextStyle(fontSize: 18), // Gaya teks tombol
  ),
),

Nah, kalau kamu coba ini di StatelessWidget, kamu cuma bisa ngeluarin output ke console. Kalau mau ada perubahan di UI, kita butuh StatefulWidget, yang akan lebih kita bahas di Part selanjutnya. Ini cuma pemanasan dulu!

Tips Ngoding Ala Programmer (Error Receh dan Debugging)

Kadang, pas ngoding, tiba-tiba muncul error yang bikin jidat berkerut. Misalnya, teks yang keluar layar (overflow), atau widget yang nggak mau di tengah padahal udah pakai Center.

Salah satu trik jitu buat debugging layout adalah dengan mengaktifkan debugPaintSizeEnabled. Cukup tambahkan di awal fungsi main kamu:


import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; // Jangan lupa import ini!

void main() {
  debugPaintSizeEnabled = true; // Aktifkan border widget
  runApp(const MyApp());
}

Dengan ini, setiap widget akan punya border visual, jadi kamu bisa lihat batas-batasnya dan tahu kenapa dia nggak di posisi yang kamu mau. Ini penyelamat banget saat lagi stuck masalah layout!

Oh ya, satu lagi. Kalau kamu lihat ada garis kuning hitam di layar (overflow), itu artinya konten kamu melebihi batas yang tersedia. Biasanya karena ada Text yang kepanjangan di dalam Row, atau Column yang anaknya terlalu banyak. Solusinya? Coba bungkus pakai Expanded atau Flexible (untuk di dalam Row/Column) atau pakai SingleChildScrollView kalau isinya memang butuh di-scroll.

Kesimpulan dan Sampai Jumpa di Part 3!

Gimana? Udah mulai kerasa "ngoding" Flutter-nya kan? Di Part 2 ini kita sudah:

  • Memahami peran MaterialApp sebagai gerbang utama aplikasi.
  • Mengenal Scaffold sebagai kerangka dasar halaman.
  • Menggunakan widget-widget fundamental seperti Text, Center, Column, Row, dan ElevatedButton.
  • Belajar sedikit trik debugging buat ngatasin error receh.

Luar biasa! Kamu sudah punya fondasi yang cukup kuat untuk mulai bikin UI sederhana. Di Part 3 nanti, kita akan bahas lebih dalam tentang StatefulWidget dan bagaimana membuat aplikasi kita lebih interaktif. Siap-siap ngopi lagi ya!

Terus semangat ngoding! Jangan takut sama bug, itu teman sejati programmer. Sampai jumpa di artikel berikutnya!

Latihan untuk Kamu, Pejuang Code!

Oke, biar ilmu yang kamu dapat nggak cuma numpang lewat, yuk coba latihan ngoding yang satu ini!

Skenario: Kamu diminta bikin UI buat aplikasi "Penghitung Jomblo Berkah" (namanya unik biar semangat!). Aplikasi ini harus menampilkan:

  1. Sebuah AppBar dengan judul "Jomblo Berkah Counter v1.0".
  2. Di bagian tengah layar, tampilkan sebuah Text besar yang bilang "Status: Masih Menunggu...".
  3. Di bawah teks tersebut, buat Row yang berisi dua tombol:
    • Tombol pertama bertuliskan "Tambah Jomblo" dengan warna merah. Kalau dipencet, dia harus mengeluarkan pesan print('Nambah lagi nih...'); di konsol.
    • Tombol kedua bertuliskan "Kurangi Jomblo" dengan warna hijau. Kalau dipencet, dia harus mengeluarkan pesan print('Alhamdulillah, berkurang!'); di konsol.
  4. Pastikan ada jarak antar tombol dan teks agar tidak terlalu mepet.

Ingat, gunakan StatelessWidget dulu ya! Kita belum masuk ke mengubah teksnya secara dinamis. Fokus pada layout dan penempatan widget. Kalau udah berhasil, kasih tahu aku di kolom komentar ya! Selamat mencoba!

Bagikan Artikel Ini