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

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

---

Pendahuluan

Pada era digital saat ini, hampir semua aplikasi mobile memerlukan fitur login sebagai pintu masuk bagi pengguna. Desain halaman login yang menarik dan responsif akan meningkatkan pengalaman pengguna serta memberikan kesan profesional pada aplikasi yang kita buat.

Dalam artikel ini, kita akan belajar membuat desain halaman login mobile menggunakan Dart Flutter, yang dapat dijalankan langsung di web Flutter Zapp.run tanpa perlu instalasi rumit.

---

Tujuan Pembelajaran

1. Memahami cara membuat tampilan halaman login di Flutter.

2. Menggunakan Widget Flutter seperti Scaffold, AppBar, TextField, dan ElevatedButton.

3. Mendesain tampilan login agar menarik dan responsif.

---

Fitur Desain Halaman Login

Tampilan login yang akan kita buat memiliki:

• AppBar dengan judul Login.

• Background berwarna hijau untuk memberikan nuansa segar.

• Lingkaran dengan ikon pengguna di bagian atas form login.

• Kolom Username dan Password dengan ikon di dalamnya.

• Tombol Sign In berwarna oranye.

• Tautan Forgot Password?

---

Kode Program Lengkap

Berikut adalah kode Dart Flutter untuk membuat desain halaman login seperti contoh:

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 icon 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 situs https://zapp.run.

2. Pilih template Flutter.

3. Hapus kode bawaan dan tempelkan kode di atas.

4. Klik tombol Run untuk menjalankan program.

5. Untuk mencoba hasil dari postingan ini ikuti link berikut : 
   https://zy3406gay350.zapp.page/#/

---

Penutup

Dengan mengikuti tutorial ini, kita telah berhasil membuat halaman login yang menarik menggunakan Flutter. Desain seperti ini dapat menjadi dasar untuk pengembangan fitur autentikasi yang lebih kompleks, seperti validasi input, koneksi ke database, atau integrasi dengan API.

Anda bisa memodifikasi warna, ikon, maupun layout sesuai kebutuhan agar tampilan lebih sesuai dengan tema aplikasi yang sedang dibuat.

---

Saran pengembangan lanjutan, bisa buat versi dengan animasi fade-in dan smooth transition supaya halaman login lebih hidup untuk diposting di blog Anda.