Hari 4: Layout dan Posisi di Flutter

Fri, May 2025 14:32:23

Halo teman-teman! Selamat datang kembali di seri belajar Flutter dari nol! Hari ini kita masuk ke materi yang sangat penting banget, yaitu tentang Layout dan Posisi. Ini adalah fondasi utama dalam membangun tampilan aplikasi yang rapi dan nyaman dilihat.

Di artikel kali ini kita akan belajar menggunakan beberapa widget layout penting seperti Padding, SizedBox, Align, Center, dan Expanded. Kita juga akan langsung praktek dengan membuat layout screen login sederhana. Seperti biasa, kita bahas pelan-pelan, santai, dan mudah dipahami. Yuk kita mulai!

1. Kenalan Dulu dengan Widget Layout

Sebelum kita buat screen login-nya, kita perlu ngerti dulu kenapa layout itu penting. Dalam Flutter, segala sesuatu adalah widget, termasuk cara menata posisi antar widget.

a. Padding

Digunakan untuk memberi jarak di dalam suatu widget. Misalnya kamu mau teks atau tombol punya jarak dari tepi layar.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text("Halo Flutter!"),
)

b. SizedBox

Dipakai untuk memberi jarak antar widget atau membuat kotak dengan ukuran tertentu.

SizedBox(height: 20),

c. Align

Untuk menyusun widget di posisi tertentu, misalnya mau taruh di pojok kiri bawah atau kanan atas.

Align(
  alignment: Alignment.bottomRight,
  child: Text("Ini di pojok kanan bawah"),
)

d. Center

Widget untuk menaruh widget lain tepat di tengah layar.

Center(
  child: Text("Di tengah"),
)

e. Expanded

Dipakai di dalam Row atau Column supaya widget mengisi ruang kosong yang tersedia.

Expanded(
  child: Container(color: Colors.blue),
)

2. Persiapan Screen Login

Sekarang kita masuk ke bagian praktek. Kita akan bikin screen login sederhana yang punya:

• Judul di tengah
• Kolom input email dan password
• Tombol login
• Sedikit padding biar nggak terlalu mepet ke tepi layar

Struktur kasar widget-nya kira-kira seperti ini:

Scaffold(
  body: Padding(
    padding: EdgeInsets.all(24),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Login"),
        TextField(),
        TextField(),
        SizedBox(height: 20),
        ElevatedButton(...),
      ],
    ),
  ),
)

3. Koding Screen Login

Berikut contoh lengkap kodenya. Kita breakdown setelah ini.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Center(
              child: Text(
                'Login',
                style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(height: 40),
            TextField(
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {},
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 16),
                child: Text('Login'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. Penjelasan Baris per Baris

• Padding: Kita kasih jarak semua sisi 24 piksel biar nggak mepet.
• Column: Ini buat menumpuk widget secara vertikal.
• Center: Untuk judul "Login" biar di tengah.
• SizedBox: Jarak antar input dan tombol.
• Expanded belum dipakai di sini karena layout ini cukup simple, tapi nanti bisa dipakai saat kita ingin tombol menyesuaikan tinggi layar.

5. Eksperimen Sendiri

Coba kalian ubah:

• Tambah icon di input field
• Ganti warna tombol
• Tambah teks "Belum punya akun? Daftar"
• Gunakan Align untuk posisikan teks "Daftar" di bawah
• Tambahkan gambar logo di atas

Semua ini bisa kamu utak-atik pakai widget layout yang sudah kita bahas tadi.

6. Kesimpulan

Layout itu inti dari tampilan di Flutter. Kalau kamu paham Padding, SizedBox, Align, Center, dan Expanded, kamu sudah bisa bikin tampilan yang bagus dan responsive.

Teruslah eksplorasi, coba-coba, dan praktekin. Nggak harus langsung perfect. Yang penting kamu ngerti kenapa dan bagaimana widget itu bekerja.

Sampai ketemu di Hari 5, kita akan bahas tentang Stateful Widget dan Pengelolaan State. Semangat belajar Flutternya!

Kalau ada pertanyaan, silakan DM via Instagram @yudianmalik. Jangan lupa bintangin project GitHub-nya juga ya!

Happy coding!