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
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 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
Buka situs https://zapp.run.
Pilih template Flutter.
Hapus kode bawaan dan tempelkan kode di atas.
Klik tombol Run untuk menjalankan program.
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.
Comments
Post a Comment