Cara Membuat Halaman Login dengan Flutter

Flutter adalah framework UI yang dirancang untuk membuat aplikasi yang indah dan berkinerja tinggi untuk berbagai platform. Artikel ini menjelaskan langkah-langkah membuat halaman login dengan Flutter, termasuk validasi input dan desain responsif.

1. Menyiapkan Proyek Flutter

Buat proyek Flutter baru dengan perintah berikut:

flutter create login_app

Buka proyek dengan editor pilihan Anda seperti VS Code atau Android Studio, kemudian jalankan aplikasi dengan perintah:

flutter run

2. Struktur Dasar Halaman Login

Buka file lib/main.dart dan buat struktur dasar untuk halaman login:

import 'package:flutter/material.dart';

void main() {
  runApp(LoginApp());
}

class LoginApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() {
    if (_formKey.currentState!.validate()) {
      print('Email: ${_emailController.text}');
      print('Password: ${_passwordController.text}');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Login Berhasil')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(
                  labelText: 'Email',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Email tidak boleh kosong';
                  } else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
                    return 'Format email tidak valid';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _passwordController,
                decoration: InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(),
                ),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Password tidak boleh kosong';
                  } else if (value.length < 6) {
                    return 'Password harus lebih dari 6 karakter';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: _login,
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. Penjelasan Kode

• TextEditingController: Digunakan untuk mengontrol input pada TextField.
• Form dan GlobalKey: Membantu melakukan validasi pada form.
• validator: Digunakan untuk memvalidasi input pada TextField.
• SnackBar: Memberikan umpan balik kepada pengguna setelah login berhasil.

4. Menambahkan Validasi Input

Validasi input dilakukan menggunakan properti validator pada TextFormField. Pastikan validasi memenuhi kebutuhan aplikasi Anda.

5. Desain Responsif

Untuk memastikan aplikasi responsif, gunakan widget seperti SingleChildScrollView untuk menangani tampilan pada layar kecil.

SingleChildScrollView(
  child: Column(
    children: [
      // Tambahkan widget lainnya di sini
    ],
  ),
)

6. Menambahkan Navigasi

Setelah login berhasil, Anda dapat menavigasikan pengguna ke halaman dashboard:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DashboardPage()),
);

Kesimpulan

Dengan Flutter, Anda dapat membuat halaman login yang interaktif dan mudah digunakan. Validasi input, desain responsif, dan navigasi adalah elemen penting dalam membangun pengalaman pengguna yang baik.