📱 Bikin Halaman Login Keren di Flutter (Tanpa Ribet, Langsung di Zapp.run)

Halo, teman-teman developer! 👋

Zaman sekarang, hampir semua aplikasi butuh halaman Login biar kelihatan profesional dan aman. Nah, di artikel ini kita bakal belajar cara bikin desain halaman login mobile yang kece pakai Flutter, dan asyiknya bisa langsung dicoba di web lewat Zapp.run. Jadi, nggak perlu repot-repot install Flutter SDK di laptop.

---

🔍 Apa yang Akan Kita Pelajari?

• Cara bikin tampilan halaman Login di Flutter.

• Gunain widget-widget penting kayak Scaffold, AppBar, TextField, sampai ElevatedButton.

• Bikin desain login yang simple tapi elegan dan pastinya responsif.

---

✨ Fitur Halaman Login yang Akan Kita Buat

✅ AppBar dengan judul Login
✅ Background hijau segar biar nggak monoton
✅ Lingkaran dengan ikon user di atas form login
✅ Kolom Username & Password lengkap sama ikon di dalamnya
✅ Tombol Sign In warna oranye biar mencolok
✅ Link “Forgot Password?” di bawah password

---

📸 Tampilan Akhirnya Bakal Kayak Gini:

---

🛠️ Kode Lengkapnya

Kita langsung ke inti pembahasan. Berikut adalah kode Flutter-nya:

dart
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(
      debugShowCheckedModeBanner: false,
      home: const LoginPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Login"),
        backgroundColor: Colors.blue,
      ),
      backgroundColor: Colors.teal[600],
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              // Lingkaran dengan ikon user
              Stack(
                alignment: Alignment.center,
                children: [
                  Container(
                    width: 100,
                    height: 100,
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.circle,
                    ),
                  ),
                  const Icon(
                    Icons.person,
                    size: 60,
                    color: Colors.grey,
                  ),
                ],
              ),
              const SizedBox(height: 20),

              // Card form login
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 24),
                padding: const EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 6,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    // Username field
                    TextField(
                      decoration: InputDecoration(
                        prefixIcon: Icon(Icons.person_outline),
                        labelText: 'User Name',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                      ),
                    ),
                    const SizedBox(height: 16),

                    // Password field
                    TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        prefixIcon: Icon(Icons.lock_outline),
                        suffixIcon: Icon(Icons.visibility),
                        labelText: 'Password',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                      ),
                    ),

                    const SizedBox(height: 8),

                    // Forgot Password link
                    Align(
                      alignment: Alignment.centerRight,
                      child: TextButton(
                        onPressed: () {},
                        child: const Text(
                          "Forgot Password?",
                          style: TextStyle(color: Colors.grey),
                        ),
                      ),
                    ),

                    const SizedBox(height: 8),

                    // Tombol Sign In
                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.orange,
                          padding: const EdgeInsets.symmetric(vertical: 14),
                        ),
                        onPressed: () {},
                        child: const Text(
                          "Sign in",
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

🚀 Cara Menjalankannya di Zapp.run

Ini bagian yang paling asyik, karena nggak perlu ribet install Flutter. Caranya:

1. Buka Zapp.run.

2. Pilih template Flutter.

3. Hapus kode bawaan, tempelkan kode di atas.

4. Klik Run, dan tadaa! Halaman login siap dilihat.

---

🔗 Link Hasil Jadi

Mau lihat hasil jadinya tanpa coding? Tinggal klik link ini:
👉 Demo Halaman Login di Zapp.run

[GAMBAR DI SINI] (tempel gambar hasil running di browser)

---

✅ Penutup

Gimana? Gampang banget kan?
Dengan langkah ini, kita udah punya desain halaman login yang simpel tapi profesional. Bisa kamu pakai untuk proyek sekolah, tugas kuliah, atau bahkan aplikasi real.

Kalau mau lebih keren, kamu bisa:
✨ Tambah animasi smooth biar lebih hidup
✨ Ganti warna dan ikon sesuai tema aplikasimu
✨ Integrasi dengan backend untuk login beneran

Next time, kita bisa bahas cara bikin halaman login dengan animasi. Stay tuned!