Membuat login mobile menggunakan flutter

🚀 My Flutter Login Page — Simple UI, Big Vibes ✨ + Smooth Animation 💻🔥

Yo fam! 👋
Hari ini gue mau flex hasil ngulik di Flutter — yes, a clean & modern mobile login page yang sekarang udah pake smooth animation. 💻✨

Bayangin, pas app dibuka, form login nggak langsung nongol gitu aja, tapi muncul dari bawah dengan animasi halus ala aplikasi premium. 🫶🔥

Highlight-nya:
👤 Big profile icon on top
🔒 Smooth username & password input fields
👁 Show/hide password button — so you don’t mess up your password
🟠 Bold “Sign in” button
🎬 Slide-up animation pas masuk halaman login

---

Nah, buat lo yang pengen nyoba bikin login page ini, gue kasih langsung kode lengkapnya. Tinggal copy → paste → run di Flutter. 🚀

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LoginPage(),
  ));
}

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage>
    with SingleTickerProviderStateMixin {
  bool _obscurePassword = true;
  late AnimationController _controller;
  late Animation<Offset> _slideAnimation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 700),
    );

    _slideAnimation = Tween<Offset>(
      begin: const Offset(0, 1), // mulai dari bawah
      end: Offset.zero, // posisi normal
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeOutCubic,
    ));

    // mulai animasi saat halaman muncul
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF009688),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Icon(Icons.account_circle, size: 100, color: Colors.white),
              const SizedBox(height: 20),
              SlideTransition(
                position: _slideAnimation,
                child: Container(
                  margin: const EdgeInsets.symmetric(horizontal: 20),
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black26,
                        blurRadius: 6,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: Column(
                    children: [
                      TextField(
                        decoration: InputDecoration(
                          prefixIcon: const Icon(Icons.person),
                          labelText: 'User Name',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                      ),
                      const SizedBox(height: 15),
                      TextField(
                        obscureText: _obscurePassword,
                        decoration: InputDecoration(
                          prefixIcon: const Icon(Icons.lock),
                          suffixIcon: IconButton(
                            icon: Icon(
                              _obscurePassword
                                  ? Icons.visibility_off
                                  : Icons.visibility,
                            ),
                            onPressed: () {
                              setState(() {
                                _obscurePassword = !_obscurePassword;
                              });
                            },
                          ),
                          labelText: 'Password',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                      ),
                      const SizedBox(height: 10),
                      Align(
                        alignment: Alignment.centerRight,
                        child: TextButton(
                          onPressed: () {},
                          child: const Text('Forgot Password?'),
                        ),
                      ),
                      const SizedBox(height: 10),
                      SizedBox(
                        width: double.infinity,
                        height: 45,
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.orange,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                            ),
                          ),
                          onPressed: () {},
                          child: const Text(
                            'Sign in',
                            style: TextStyle(fontSize: 16),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

Penutup:

That’s it gengs! 🎯
Sekarang lo udah punya login page Flutter yang bukan cuma simple & modern, tapi juga punya smooth animation biar keliatan premium. 🚀✨

Kalau lo baru belajar Flutter, project ini cocok banget buat latihan karena:

• Lo bakal ngerti dasar layout widget

• Lo belajar handle input text & tombol

• Lo bisa explore animasi biar UI lebih hidup

Next level? Tinggal sambungin ke Firebase Auth atau API backend biar login ini beneran berfungsi. 🔥

So… gimana?
Apakah login page ini udah pass the vibe check menurut lo? 😏
Drop pendapat lo di kolom komentar, dan jangan lupa share ke temen coding lo biar makin rame!

Happy coding & keep building awesome stuff! 💻💙

#FlutterDev #UIUX #GenZCoding #CodeLife #MobileDev