Membuat Tampilan Login Modern dengan Flutter (Penjelasan untuk Pemula)

Link Demo Aplikasi : https://zbjy06vobjz0.zapp.page/#/

Hari ini saya belajar bagaimana membuat tampilan Login Page modern menggunakan Flutter. Tujuannya adalah agar saya paham bagaimana memanfaatkan komponen dasar Flutter seperti Text, Image, Button, Input, Card, List, Media, dan Navigation.

Saya mencoba meniru desain login yang umum: ada ilustrasi gambar di atas, form input username dan password, tombol login, tombol sosial media (Google dan Facebook), serta link “Forget password” dan “Sign up”.

---

1. Kode Flutter (main.dart)

Berikut contoh kode sederhana untuk membuat tampilan login di Flutter (cocok dijalankan di zapp.run):

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(
      title: 'Login UI',
      debugShowCheckedModeBanner: false,
      home: const LoginPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 60),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Gambar ilustrasi
              SizedBox(
                height: 180,
                child: Image.network(
                  "https://cdn-icons-png.flaticon.com/512/5234/5234843.png",
                  fit: BoxFit.contain,
                ),
              ),
              const SizedBox(height: 20),

              // Judul
              const Text(
                "Sign In",
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                "Enter valid user name & password to continue",
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.grey),
              ),
              const SizedBox(height: 30),

              // Input Username
              TextField(
                decoration: InputDecoration(
                  prefixIcon: const Icon(Icons.person_outline),
                  hintText: "User name",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
              const SizedBox(height: 15),

              // Input Password
              TextField(
                obscureText: true,
                decoration: InputDecoration(
                  prefixIcon: const Icon(Icons.lock_outline),
                  hintText: "Password",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),

              // Forget Password
              Align(
                alignment: Alignment.centerRight,
                child: TextButton(
                  onPressed: () {},
                  child: const Text(
                    "Forget password",
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              ),
              const SizedBox(height: 10),

              // Tombol Login
              SizedBox(
                width: double.infinity,
                height: 50,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  onPressed: () {},
                  child: const Text(
                    "Login",
                    style: TextStyle(fontSize: 18, color: Colors.white),
                  ),
                ),
              ),
              const SizedBox(height: 20),

              const Text("Or Continue with"),
              const SizedBox(height: 20),

              // Tombol Sosial Media
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _socialButton("Google", "https://cdn-icons-png.flaticon.com/512/281/281764.png"),
                  const SizedBox(width: 20),
                  _socialButton("Facebook", "https://cdn-icons-png.flaticon.com/512/5968/5968764.png"),
                ],
              ),
              const SizedBox(height: 30),

              // Link Sign up
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text("Haven't any account? "),
                  GestureDetector(
                    onTap: () {},
                    child: const Text(
                      "Sign up",
                      style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  // Widget tombol sosial media
  Widget _socialButton(String text, String imageUrl) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: [
          Image.network(imageUrl, height: 20),
          const SizedBox(width: 8),
          Text(text),
        ],
      ),
    );
  }
}

---

2. Penjelasan Komponen UI

Agar tidak bingung, saya pelajari bahwa komponen UI di Flutter bisa dikelompokkan seperti ini:

1. Text (Tulisan)

   • "Sign In", "Enter valid user name...", "Forget password", "Sign up".

   • Flutter: Text()

2. Image (Gambar)

   • Ilustrasi orang di atas.

   • Logo Google & Facebook di tombol bawah.

   • Flutter: Image.network() atau Image.asset()

3. Button (Tombol)

   • Tombol Login (biru).

   • Tombol Google & Facebook.

   • Forget password (link).

   • Flutter: ElevatedButton, TextButton, OutlinedButton.

4. Input (Form)

   • User name (TextField dengan ikon orang).

   • Password (TextField dengan ikon gembok).

   • Flutter: TextField() atau TextFormField().

5. Card

   • Tidak ada card khusus, tapi tombol sosial media bisa dibuat mirip card dengan Container.

6. List

   • Tidak ada daftar data pada halaman login.

7. Media

   • Hanya gambar (ilustrasi dan logo sosial media).

8. Navigation

   • "Sign up" untuk ke halaman registrasi.

   • "Forget password" untuk ke halaman reset password.

   • Flutter: Navigator.push()

---

3. Kesimpulan

Dengan membuat halaman login sederhana ini, saya jadi lebih paham bahwa:

• Text menampilkan informasi.

• Image memberikan ilustrasi/ikon.

• Button adalah interaksi utama (login, sign up, dll).

• Input menerima data dari user.

• Navigation memungkinkan pindah halaman.

Halaman login sederhana ini bisa menjadi latihan dasar Flutter sebelum membuat aplikasi yang lebih kompleks seperti CRUD, Absensi, atau E-Commerce.

---

👉 Jadi, buat kamu yang pemula juga, cobalah jalankan kode ini di zapp.run atau Android Studio, lalu perhatikan setiap komponen yang digunakan. Dengan latihan ini, kamu akan semakin familiar dengan bahasa Dart & framework Flutter.

---

Postingan saya selanjutnya coba bikin juga gambar mockup dengan tanda panah (highlight bagian Text, Image, Button, Input, dll).