---

📱✨ Membuat Desain Halaman Login Mobile dengan Flutter di Web Flutter Zapp.run

👩‍💻 Oleh: Sela Salafiah – XI PPLG

---

📖 Pendahuluan

Di era digital saat ini 🌐, hampir semua aplikasi mobile 📲 memerlukan fitur login sebagai pintu masuk bagi pengguna 🔑.
Desain halaman login yang menarik 🎨, responsif 📏, dan profesional 🏆 akan meningkatkan pengalaman pengguna serta memberi kesan pertama yang baik.

Pada artikel ini, kita akan belajar membuat desain halaman login mobile menggunakan Dart Flutter 🐦, yang bisa langsung dijalankan di web Flutter Zapp.run 💻 tanpa instalasi ribet.

---

🎯 Tujuan Pembelajaran

✅ Memahami cara membuat tampilan halaman login di Flutter.
✅ Menggunakan Widget Flutter seperti Scaffold, AppBar, TextField, dan ElevatedButton.
✅ Mendesain tampilan login agar menarik 💡 dan responsif 📐.

---

💎 Fitur Desain Halaman Login

Tampilan login yang akan kita buat punya:

1️⃣ 📌 AppBar dengan judul Login.
2️⃣ 💚 Background berwarna hijau untuk nuansa segar.
3️⃣ 👤 Lingkaran dengan ikon pengguna di bagian atas form login.
4️⃣ 📝 Kolom Username dan 🔒 Password dengan ikon di dalamnya.
5️⃣ 🟧 Tombol Sign In berwarna oranye yang menarik perhatian.
6️⃣ ❓ Tautan Forgot Password? untuk reset sandi.

---

💻 Kode Program Lengkap

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 Menjalankan di Web Flutter Zapp.run

1️⃣ Buka 🌐 https://zapp.run
2️⃣ Pilih template Flutter.
3️⃣ Hapus kode bawaan dan tempelkan kode di atas 📋.
4️⃣ Klik tombol Run ▶️ untuk menjalankan program.

---

📝 Penutup

Dengan mengikuti tutorial ini, kita telah berhasil membuat halaman login yang menarik 💖, sederhana, dan fungsional 🛠 menggunakan Flutter.

💡 Tips pengembangan:

• Coba tambahkan animasi fade-in ✨.

• Gunakan smooth transition 🎥 agar perpindahan halaman lebih halus.

• Sesuaikan warna 🎨 agar cocok dengan tema aplikasi kamu.

Semoga tutorial ini bermanfaat dan bisa jadi inspirasi untuk project kamu berikutnya 🚀.

---