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



## Pendahuluan


Di era digital saat ini, hampir semua aplikasi mobile membutuhkan fitur **login** sebagai pintu masuk bagi pengguna. Halaman login yang didesain dengan baik tidak hanya memberikan kesan **profesional**, tetapi juga meningkatkan **pengalaman pengguna** (user experience).


Pada artikel ini, kita akan belajar cara membuat **desain halaman login mobile** menggunakan **Dart Flutter** yang bisa dijalankan langsung di web **Flutter Zapp.run**, tanpa perlu instalasi rumit di komputer.


---


## 🎯 Tujuan Pembelajaran


Dengan mengikuti artikel ini, Anda akan:


* Memahami cara membuat tampilan halaman login di Flutter.

* Mengenal widget Flutter seperti **Scaffold, AppBar, TextField, dan ElevatedButton**.

* Mendesain tampilan login agar **menarik, modern, dan responsif**.


---


## ✨ Fitur Desain Halaman Login


Halaman login yang dibuat dalam tutorial ini memiliki:

✅ **AppBar** dengan judul *Login*.

✅ **Background hijau** yang memberi nuansa segar.

✅ **Lingkaran dengan ikon pengguna** di bagian atas form.

✅ **Kolom Username & Password** dengan ikon bawaan.

✅ **Tombol Sign In** berwarna oranye yang mudah dilihat.

✅ **Tautan "Forgot Password?"** di bawah input.


---


## 💻 Kode Program


Kode program lengkap sudah dipindahkan ke Pastecode agar lebih rapi dan mudah diakses.

👉 [Klik di sini untuk melihat kode lengkapnya](https://pastecode.io/s/szgtpzos)


---


## 🚀 Cara Menjalankan di Web Flutter Zapp.run


Untuk mencoba program ini, ikuti langkah berikut:


1. Buka situs [https://zapp.run](https://zapp.run).

2. Pilih template **Flutter**.

3. Hapus kode bawaan, lalu **tempelkan kode dari link Pastecode di atas**.

4. Klik tombol **Run** untuk menjalankan aplikasi langsung di browser.


Atau, biar lebih praktis, kamu bisa langsung mencoba hasilnya di sini:

👉 [Demo Aplikasi Login 1](https://zy3406gay350.zapp.page/#/)

👉 [Demo Aplikasi Login 2](https://zhbw060qhbx0.zapp.page/#/)


---


## 🎨 Penutup


Dengan tutorial ini, kita berhasil membuat **desain halaman login** yang simpel namun elegan menggunakan Flutter. Desain ini bisa dijadikan dasar untuk fitur autentikasi yang lebih kompleks, seperti:


* Validasi input username & password.

* Koneksi ke database.

* Integrasi API untuk login.


👉 Untuk pengembangan lanjutan, kamu bisa menambahkan **animasi fade-in** atau **smooth transition** agar tampilan login lebih hidup dan menarik.


Semoga artikel ini bermanfaat untuk belajar Flutter sekaligus memperkaya portofolio aplikasi mobile kamu. 🚀


--

Komentar

Posting Komentar

Postingan populer dari blog ini

🍲 Aplikasi Jastip Baso Soteng dengan Flutter

Gambar
Halo semuanya! 👋 Di artikel ini saya Afrizal Herlambang mau berbagi project kecil yang saya buat menggunakan **Flutter**. Project ini berupa aplikasi **Jastip Baso Soteng**, yaitu aplikasi sederhana untuk memesan makanan online. Aplikasi ini saya buat dengan tujuan belajar **Flutter Web** dan juga biar lebih mudah kalau ada yang mau pesan jajanan lewat WhatsApp. --- ### ✨ Fitur Utama * Menampilkan daftar menu jajanan (**Baso Soteng, Piscok, Karoket Bihun, dan Donat**). * Bisa menambah/mengurangi jumlah pesanan. * Hitung otomatis total harga pesanan. * Tersedia tombol **Pesan Sekarang** yang langsung terhubung ke WhatsApp penjual. * Desain simpel tapi modern, cocok untuk UMKM kuliner. --- ### 🛠️ Teknologi yang digunakan * **Flutter** (untuk frontend aplikasi) * **Dart** (bahasa pemrograman) * **WhatsApp API (wa.me)** untuk mengirim pesanan --- ### 📸 Tampilan Aplikasi Aplikasi ini tampilannya sederhana, ada list menu dengan foto, deskripsi, dan tombol tambah/kurangi jumlah pesanan. Di...
Baca selengkapnya

🚀 Project Flutter Web: Lokasi Mie Gacoan dengan Google Maps & WhatsApp 📍📱

Hai teman-teman! 👋 Kali ini aku mau share project Flutter Web yang aku buat untuk tugas, yaitu aplikasi sederhana yang membantu kita menemukan lokasi Mie Gacoan Banjar Mayjen dengan mudah lewat peta Google Maps dan langsung bisa chat via WhatsApp! ✨ Fitur Utama 🗺️ Tampilan peta interaktif menggunakan Google Maps embed iframe 📍 Mendapatkan lokasi kamu secara otomatis (kalau diizinkan browser) 🚗 Tombol navigasi yang langsung mengarahkan kamu ke Gacoan lewat Google Maps 💬 Tombol WhatsApp untuk chat langsung ke nomor Gacoan tanpa ribet 🛠️ Teknologi yang Digunakan 💙 Flutter Web : untuk UI modern dan responsif 🌐 dart:html : akses fitur browser seperti geolocation dan membuka link baru 🗺️ Google Maps Embed API : tampilkan peta tanpa ribet dengan iframe 🔥 Kode Main Code [ https://pastecode.io/s/mx3i4opd] 🎨 Tampilan Aplikasi Aplikasi ini hadir dengan desain yang fresh dan clean, pakai warna merah khas Gacoan, tombol besar yang mudah ditekan, s...
Baca selengkapnya

kode program Flutter untuk aplikasi To-Do List dengan fitur CRUD menggunakan database SQLite

  Berikut adalah contoh kode program Flutter untuk aplikasi To-Do List dengan fitur CRUD menggunakan database SQLite: 1. Tambahkan Dependency di pubspec.yaml dependencies: flutter: sdk: flutter sqflite: ^2.3.0 path: ^1.8.0 path_provider: ^2.1.1 2. Model ToDo class ToDo { final int? id; final String title; final String description; ToDo({this.id, required this.title, required this.description}); Map<String, dynamic> toMap() { return { 'id': id, 'title': title, 'description': description, }; } factory ToDo.fromMap(Map<String, dynamic> map) { return ToDo( id: map['id'], title: map['title'], description: map['description'], ); } } 3. Database Helper import 'package:sqflite/sqflite.dart'; import 'package:path/path.dart'; import 'package:path_provider/path_provider.dart'; import 'dart:io'; import 'todo.dart...
Baca selengkapnya