Membuat tampilan sederhana

Bikin Tampilan Flutter Sederhana (Anti Ribet)

Kalau lagi belajar Flutter, biasanya tugas awalnya nggak jauh-jauh dari bikin tampilan sederhana.
Di artikel ini aku mau bahas cara bikin UI Flutter yang simpel, rapi, dan gampang dipahami, cocok banget buat pemula.

Targetnya sederhana:

• Ada AppBar dengan judul

• Body pakai Column

• Minimal 3 Text

• Tampilannya rapi dan nggak bikin pusing

---

Mulai dari Struktur Dasar Flutter

Semua aplikasi Flutter dimulai dari fungsi main(). Dari sini aplikasi dijalankan.

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(),
    ),
  );
}

MaterialApp bisa dibilang sebagai “kerangka besar” aplikasi, sedangkan Scaffold adalah layout halaman utama.

---

Menambahkan AppBar Biar Ada Judul

Biar aplikasinya nggak kosong dan kelihatan jelas fungsinya, kita tambahkan AppBar.

appBar: AppBar(
  title: Text('Tampilan Sederhana'),
),

AppBar ini muncul di bagian atas layar dan biasanya dipakai buat judul halaman.

---

Mengisi Body dengan Column

Karena kita mau nampilin beberapa teks dari atas ke bawah, kita pakai Column.

Column(
  children: [
    Text('Text Pertama'),
    Text('Text Kedua'),
    Text('Text Ketiga'),
  ],
),

Column itu tugasnya menyusun widget secara vertikal. Cocok banget buat tampilan teks sederhana.

---

Supaya Rapi, Tambahkan Padding dan Jarak

Kalau teks langsung nempel ke pinggir layar, tampilannya jadi kurang enak.
Makanya kita pakai Padding dan SizedBox.

Padding(
  padding: EdgeInsets.all(16),
  child: Column(
    children: [
      Text('Text Pertama'),
      SizedBox(height: 8),
      Text('Text Kedua'),
      SizedBox(height: 8),
      Text('Text Ketiga'),
    ],
  ),
),

• Padding → kasih jarak dari tepi layar

• SizedBox → kasih jarak antar teks

Hasilnya jauh lebih rapi walaupun kelihatannya cuma beda dikit.

---

Mengatur Posisi dan Ukuran Text

Biar kelihatan lebih enak dibaca, kita atur sedikit ukuran font dan posisi teks.

crossAxisAlignment: CrossAxisAlignment.start,

Ini bikin teks rata kiri, jadi kelihatan natural kayak baca artikel.

Ukuran font juga dibikin beda biar nggak monoton.

---

Kode Lengkap Tampilan Sederhana Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tampilan Sederhana'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Text Pertama',
                style: TextStyle(fontSize: 18),
              ),
              SizedBox(height: 8),
              Text(
                'Text Kedua',
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(height: 8),
              Text(
                'Text Ketiga',
                style: TextStyle(fontSize: 14),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

---

Penutup

Dari contoh sederhana ini, kita bisa belajar beberapa hal penting:

• Cara pakai AppBar

• Fungsi Column buat layout vertikal

• Pentingnya Padding dan SizedBox buat kerapian

• Sedikit styling bisa bikin tampilan jauh lebih enak dilihat

Walaupun simpel, contoh ini adalah pondasi penting sebelum masuk ke tampilan Flutter yang lebih kompleks.
Kalau sudah paham ini, lanjut ke Row, Button, atau form bakal jauh lebih gampang 🚀