Membuat Aplikasi Profil


 hasil: https://zz2y06ynz2z0.zapp.page/#/

✨ Membuat Aplikasi Profil Elegan dengan Flutter

Halo, teman-teman developer! 👋
Di artikel kali ini, kita akan belajar cara membuat aplikasi profil elegan menggunakan Flutter.
Aplikasi ini menampilkan foto profil, nama, deskripsi pekerjaan, statistik, serta tombol interaktif seperti “Ikuti” dan “Bagikan”.

🧠 Apa Itu Flutter?

Flutter adalah framework buatan Google yang digunakan untuk membuat aplikasi mobile, web, dan desktop dari satu basis kode saja.
Dengan Flutter, kita bisa membuat tampilan yang indah dan responsif dengan mudah menggunakan widget.

💡 Tentang Aplikasi yang Kita Buat

Aplikasi yang kita buat kali ini bernama “Kartu Profil Flutter”.
Tujuannya adalah menampilkan informasi pengguna seperti layaknya halaman profil media sosial.
Fitur-fiturnya antara lain:

  • Foto profil berbentuk lingkaran

  • Nama dan pekerjaan pengguna

  • Tombol “Ikuti” yang berubah saat ditekan

  • Statistik jumlah postingan, pengikut, dan yang diikuti

  • Card berisi deskripsi singkat “Tentang Saya”

  • Tombol aksi seperti Pesan, Telepon, dan Bagikan

⚙️ Cara Kerja Kodenya

Aplikasi dimulai dari fungsi main(), yang menjalankan widget utama bernama ProfileApp.
Widget ini berisi pengaturan tema aplikasi dan halaman awal (ProfilePage).

Di halaman utama (ProfilePage), digunakan struktur Scaffold yang terdiri dari:

  • AppBar → menampilkan judul di bagian atas

  • Body → berisi konten profil yang bisa di-scroll

Tampilan utama disusun dengan Column dan Row untuk menata elemen secara vertikal dan horizontal.
Widget CircleAvatar digunakan untuk menampilkan foto profil, sedangkan Text untuk menampilkan nama dan deskripsi.

Bagian yang menarik adalah tombol “Ikuti”, karena bisa berubah menjadi “Mengikuti” saat ditekan.
Hal ini menggunakan fungsi setState() untuk memperbarui tampilan secara dinamis.

Selain itu, ada juga widget Card untuk menampilkan deskripsi diri dengan tampilan rapi dan modern, serta tiga tombol aksi berbentuk bulat untuk fitur Pesan, Telepon, dan Bagikan.

🖼️ Cuplikan Kode Utama

Berikut potongan bagian penting dari kode aplikasi:

ElevatedButton.icon(
  onPressed: () {
    setState(() {
      isFollowed = !isFollowed;
    });
  },
  icon: Icon(
    isFollowed ? Icons.check_circle : Icons.person_add,
    color: Colors.white,
  ),
  label: Text(
    isFollowed ? 'Mengikuti' : 'Ikuti',
  ),
)

Kode di atas membuat tombol interaktif yang berubah teks dan ikon saat ditekan.

🎯 Kesimpulan

Dengan menggunakan Flutter, kita bisa membuat aplikasi profil yang modern, interaktif, dan elegan hanya dengan beberapa baris kode.
Aplikasi ini memanfaatkan widget seperti Column, Row, Card, dan CircleAvatar untuk membangun layout, serta setState() untuk mengatur perubahan tampilan secara real-time.

Jika kamu ingin mencobanya langsung, kamu bisa jalankan kode ini di zapp.run atau DartPad.dev tanpa perlu menginstal apa pun.

💬 Penutup

Flutter benar-benar memudahkan kita untuk membuat aplikasi cantik dan responsif.
Cukup dengan satu bahasa (Dart), kita bisa menghasilkan tampilan profesional layaknya aplikasi besar.

Semoga artikel ini bermanfaat dan bisa menjadi inspirasi buat kamu yang ingin belajar membuat tampilan profil di Flutter 💙

Selamat mencoba, dan jangan lupa eksplorasi lebih jauh! 🚀

salam hangat, Dara

Komentar

Posting Komentar

Postingan populer dari blog ini

artikel mengenai pengembangan gim

Gambar
Dara Tri Yuliani  XI RPL 1 **Artikel 1: Memulai Perjalanan Pengembangan Gim: Panduan untuk Pemula** **Pendahuluan** Industri gim telah berkembang pesat, menawarkan peluang menarik bagi para peminat. Jika Anda tertarik untuk menciptakan dunia virtual Anda sendiri, artikel ini adalah tempat yang tepat untuk memulai. Kami akan membahas dasar-dasar pengembangan gim, memberikan panduan langkah demi langkah untuk membantu Anda memulai perjalanan yang menyenangkan ini. ** Analisis ** Artikel ini bertujuan untuk memberikan gambaran umum tentang pengembangan gim, cocok untuk pemula yang ingin memahami proses dan alat yang diperlukan. **Langkah-langkah** * ** Langkah 1  Memahami Dasar-Dasar Pengembangan Gim**     Sebelum terjun lebih dalam, penting untuk memahami konsep dasar. Pengembangan gim melibatkan beberapa aspek, termasuk:     * **Desain Gim:** Memikirkan ide gim, genre, target audiens, dan mekanisme permainan.     * **Pemrograman:** Menulis ko...
Baca selengkapnya

MEMBUAT LAYOUT RESPONSIF DAN NAVIGASI APLIKASI

Gambar
📱 Materi: Membuat Layout Responsif dan Navigasi Aplikasi 1. Pengantar Dalam pengembangan aplikasi mobile (misalnya dengan Flutter ), dua hal penting yang harus diperhatikan adalah: Layout Responsif – tampilan aplikasi bisa menyesuaikan ukuran layar (smartphone, tablet, web). Navigasi Aplikasi – cara pengguna berpindah dari satu halaman ke halaman lain. 2. Membuat Layout Responsif a. Mengapa Responsif? Tidak semua pengguna memakai perangkat dengan ukuran layar yang sama. Aplikasi harus tetap nyaman dilihat, baik di layar kecil maupun besar. Responsif meningkatkan User Experience (UX) . b. Teknik Membuat Layout Responsif di Flutter MediaQuery Digunakan untuk mendapatkan ukuran layar. double width = MediaQuery.of(context).size.width; double height = MediaQuery.of(context).size.height; Contoh penggunaan: Container( width: MediaQuery.of(context).size.width * 0.8, height: 200, color: Colors.blue, ) LayoutBuilder Menyesuaikan tampilan berdas...
Baca selengkapnya

Membuat halaman Data Kelompok Belajar Zapp.run

Membuat Halaman Data Kelompok Belajar dengan Flutter di Zapp.run Flutter adalah framework yang sangat populer untuk membuat aplikasi mobile cross-platform (Android & iOS). Kali ini kita akan belajar membuat satu halaman aplikasi yang menampilkan data kelompok belajar dengan foto anggota, detail informasi (nama, no absen, alamat, kelas, hobi), serta tombol di bagian bawah yang memunculkan popup sederhana. Struktur Halaman yang Akan Dibuat Bagian atas → Judul "Wededen Squad". Bagian isi → Daftar anggota kelompok dengan foto, nama, no absen, alamat. Jika salah satu anggota ditekan, akan terbuka halaman detail berisi informasi lebih lengkap. Bagian bawah → Tombol "Awas Meledug". Jika ditekan, akan muncul popup dengan pesan salam. Persiapan di Zapp.run Masuk ke Zapp.run. Buat project Flutter baru. Simpan foto anggota kelompok di folder assets/ pada project. Tambahkan path assets di file pubspec.yaml. Contoh: flutter: assets: - assets/Azka.jpg ...
Baca selengkapnya