Cara Membuat Form Login dan Signup dengan Judul Dinamis di Flutter

-

Cara Membuat Form Login dan Signup dengan Judul Dinamis di Flutter


Kali ini kita akan belajar bagaimana membuat form login dan signup di Flutter yang punya judul dinamis berbeda sesuai halaman yang tampil. Jadi, saat di halaman login, judulnya “Sign In To Your Account,” dan kalau di halaman signup, tulisannya berubah jadi “SignUp To Start Our Journey.”

Ini penting supaya user jelas sedang di mana dan desain form tetap rapi dan konsisten.

Kenapa Judul Dinamis itu Penting?

Kalau form login dan signup kita tampilkan dengan komponen yang sama tapi tanpa penanda yang jelas, pengguna bisa bingung. Dengan memberikan judul yang berbeda dan jelas di luar form, pengguna lebih mudah memahami fungsi halaman yang mereka akses.

Struktur Utama yang Dibuat


Form kita nanti akan punya tiga bagian utama:

Judul dinamis — Teks yang berubah sesuai halaman (login/signup), dan letaknya di luar box input.

Form Input — Berisi TextField untuk email, password, dan konfirmasi password di halaman signup.

Tombol dan Navigasi — Tombol untuk submit dan tombol untuk berpindah halaman antara login dan signup.

Cara Membuatnya

Buat widget judul di atas form

Di setiap halaman, kita letakkan Text yang menampilkan kalimat berbeda berdasarkan halaman. Misalnya:

Text(

  isLogin ? 'Sign In To Your Account' : 'SignUp To Start Our Journey',

  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.blue.shade700),

  textAlign: TextAlign.center,

),

Buat form input di bawah judul

Kemudian, buat form dengan Container yang punya Column berisi TextField yang diperlukan. Jangan lupa atur SizedBox untuk spasi yang rapi.

Letakkan tombol dan link navigasi di bagian bawah

Gunakan Spacer() untuk mengatur tombol supaya selalu di bawah container, biar tampilan konsisten dan enak dilihat.

Tips supaya desain tetap rapi

Gunakan ukuran container yang sama untuk login dan signup supaya layout tidak berubah-ubah.

Gunakan Spacer() untuk menekan tombol agar selalu berada di posisi yang sama.

Beri jarak yang pas antara elemen menggunakan SizedBox agar form tidak terlalu rapat atau terlalu renggang.

Kesimpulan

Dengan cara ini, kita bisa membuat halaman login dan signup yang user-friendly, konsisten, dan profesional. Judul yang berubah sesuai halaman sangat membantu memperjelas konteks untuk pengguna tanpa merubah layout utama.

Semoga tutorial ini membantu dan selamat mencoba! Kalau ada yang ingin ditanyakan, jangan ragu tulis di kolom komentar ya.

kalo mau lihat hasilnya itu bisa disini ya

https://za4206b6a430.zapp.page/#/

atau mau lihat source code nya juga bisa

https://zapp.run/edit/flutter-za4206b6a430?entry=lib%2Fmain.dart


Oh ya dan terakhir ini belum bisa di hp karena layout di hp itu terlalu kecil sehingga akan menyebabkan overflow pada tombol SignIn dan SignUp.

Komentar

Posting Komentar

Postingan populer dari blog ini

-
Gambar
📱 Widget Dasar Flutter/Dart 1 Stateless Widget Widget Stateless adalah widget yang tidak dapat berubah (immutable). Cocok untuk menampilkan konten statis yang tidak perlu diperbarui berdasarkan interaksi pengguna. 💡 Lihat Contoh Kode Dart Code - Stateless Widget Salin Kode class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(20), child: Text( 'Halo, saya Stateless Widget!', style: TextStyle(fontSize: 18), ), ); } } 2 Stateful Widget Widget Stateful adalah widget yang dapat berubah (mutable). Digunakan ketika widget perlu diperbarui berdasarkan interaksi pengguna atau data yang berubah. 💡 Lihat Contoh Kode Dart Code - Stateful Widget Sa...
Baca selengkapnya

Kunci Jawaban Soal Pilihan Ganda Flutter UI (State Management)

-
Gambar
Kunci Jawaban Soal Pilihan Ganda Flutter UI (State Management) Sedikit latihan untuk memahami konsep dasar Flutter seperti Widget , Layout , State Management , dan Animasi . Soal ini cocok buat kamu yang ingin menguji seberapa jauh pemahaman tentang cara kerja UI di Flutter. 📄 Halaman 1 Jawaban: B. MyApp D. Widget tersebut tidak memiliki state yang dapat berubah selama runtime. A. Karena ia memerlukan controller. D. Di dalam TodoListScreenState . C. setState() C. Scaffold C. Column D. Expanded C. Menempatkan FAB di tengah bawah layar. C. SizedBox 📄 Halaman 2 Jawaban: C. TextField B. TextEditingController C. Pengguna menekan tombol "Enter/Done" pada keyboard. C. SnackBar C. AnimatedList A. Memberikan identifikasi unik pada setiap item daftar. D. Card B. ListTile B. Mengubah status selesai/belum selesai dari tugas. B. Teks dicoret dengan garis. 📄 Halaman 3 Jawaban: C. BoxDecoration dengan LinearGradient ...
Baca selengkapnya

🎮 Review Aplikasi Flutter: Pixel Quest To-Do

-
Gambar
🎮 Review Aplikasi Flutter: Pixel Quest To-Do 1️⃣ Halaman Pemilihan Karakter 📸 Screenshot Tampilan 💻 Potongan Kode Wrap( spacing: 16, children: _emojis.map((e) { final selected = _selected == e; return GestureDetector( onTap: () => setState(() => _selected = e), child: AnimatedContainer( duration: const Duration(milliseconds: 180), transform: Matrix4.identity()..scale(selected ? 1.06 : 1.0), padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: selected ? const Color(0xFF00ADB5) : const Color(0xFF393E46), borderRadius: BorderRadius.circular(12), border: Border.all( color: selected ? Colors.cyanAccent : Colors.transparent, width: 2), ), child: Text(e, style: const TextStyle(fontSize: 40)), ), ); }).toList(), ) 🧩 Penjelasan Singkat Bagian kode ini menampilkan daftar karakter dalam bentuk e...
Baca selengkapnya