Memahami UI Flutter



 1. https://zapp.run/edit/flutter-zh1q406fzh1q5?entry=lib/main.dart&file=lib/main.dart

2. https://zapp.run/edit/flutter-zzli0641zlj0?entry=lib/main.dart&file=lib/main.dart


📱 Apa itu UI di Flutter?


UI (User Interface) Flutter adalah tampilan aplikasi yang dibuat dari kumpulan widget.

Flutter pakai konsep menyusun widget seperti lego — kecil-kecil, lalu digabung jadi satu layar.


🧩 Konsep Paling Penting: Widget


Di Flutter:


-Tombol = widget

-Teks = widget

-Layout = widget

-Satu halaman = widget


➡️ Satu layar aplikasi = kumpulan widget yang disusun


🏗️ Struktur UI Flutter (Gambaran Umum)


Biasanya satu layar punya:


Header (judul / AppBar)

Body (isi utama)

Footer (opsional)

Flutter menyediakan “kerangka halaman” supaya tampilan rapi dan konsisten.


📐 Pengaturan Layout


Flutter tidak pakai koordinat X-Y, tapi pakai alur penyusunan.


Arah Penyusunan:


Vertikal → dari atas ke bawah


Horizontal → dari kiri ke kanan


Konsep penting:


Spacing → jarak antar elemen

Alignment → rata kiri, tengah, kanan

Flex → ukuran menyesuaikan layar


🎨 Tampilan & Styling


UI Flutter bisa diatur dari:


Warna

Ukuran

Bentuk (kotak, rounded)

Bayangan

Font & ketebalan teks


Biasanya satu elemen visual punya:


-Ukuran

-Warna

-Jarak

-Posisi


🔄 UI Statis vs Dinamis


Statis → tampilannya tetap

Dinamis → bisa berubah karena:

klik tombol

input user

data dari API

Flutter membedakan UI yang tidak berubah dan yang bisa berubah supaya performa lebih efisien.


📱 Responsif (Bisa di Semua Layar)


-UI Flutter dirancang supaya:

-Bisa jalan di HP kecil & besar

-Bisa menyesuaikan orientasi

-Tidak pecah saat ukuran layar berubah


Caranya dengan:

-Elemen fleksibel

-Tidak pakai ukuran fix berlebihan

🧠 Cara Berpikir Saat Membuat UI Flutter


-Biasanya developer mikir:

-Ini satu layar terdiri dari apa saja?

-Elemen mana yang disusun vertikal?

-Elemen mana yang sejajar horizontal?

-Mana yang perlu jarak?

-Mana yang bisa berubah?

✨ Ringkasannya


Flutter UI = kumpulan widget

Semua tampilan disusun, bukan digambar manual

Fokus ke struktur, layout, dan konsistensi

UI harus fleksibel dan responsif

Comments

Post a Comment

Popular posts from this blog

Artikel terkait Pengembangan Gim

Image
1: Pengembangan Gim: Tahapan, Teknologi, dan Tantangan di Era Digital Pendahuluan Pengembangan gim (game development) adalah proses kreatif dan teknis dalam menciptakan permainan digital yang dapat dinikmati di berbagai platform seperti PC, konsol, dan perangkat mobile. Di era digital saat ini, industri gim berkembang sangat pesat dan menjadi salah satu sektor hiburan dengan nilai ekonomi tertinggi di dunia. Tidak hanya sebagai sarana hiburan, gim juga dimanfaatkan untuk edukasi, simulasi, dan bahkan kesehatan. Artikel ini akan membahas secara lengkap tahapan pengembangan gim, teknologi yang digunakan, serta tantangan yang sering dihadapi oleh pengembang gim. Apa Itu Pengembangan Gim? Pengembangan gim adalah proses perancangan, pembuatan, pengujian, dan peluncuran sebuah permainan digital. Proses ini melibatkan berbagai disiplin ilmu, seperti: - Pemrograman - Desain grafis - Penulisan cerita (naratif) - Desain audio - Manajemen proyek Sebuah gim yang baik tidak hanya bergantung pada vi...
Read more

project planning ui/ux

Image
  🎨DESAIN UI/UX PADA APLIKASI GOPAY✨ LINK👇🏻👇🏻 https://www.figma.com/design/ASl4Ih4veIIwo9UH0ONpxH/Gopay-app--Community-?t=YztLRfIVI0TbLen9-0 🟢 Desain UI/UX pada Aplikasi GoPay Menggunakan Figma 📘 Panduan Lengkap 🎯 Tujuan Panduan Membuat desain UI/UX aplikasi GoPay yang modern, estetik, dan user-friendly menggunakan Figma, lengkap dari riset awal hingga prototyping. 1️⃣ Riset & Analisis 🔍 1.1 Analisis Aplikasi GoPay Pelajari fitur utama: Bayar, Transfer, Riwayat, Tarik Tunai, Promo. Amati gaya visual dan alur pengguna saat menggunakan aplikasi asli. 🎯 1.2 Tujuan Redesain Membuat tampilan lebih minimalis dan menarik. Menambahkan elemen visual lucu (fun) agar user experience lebih menyenangkan. Meningkatkan navigasi agar lebih mudah dipahami semua pengguna. 2️⃣ Wireframing (Kerangka Desain) 📱 2.1 Sketsa Awal Gunakan frame device seperti iPhone 13 atau Android di Figma. Buat layout dasar untuk halaman utama, bayar, transfer, riwayat,...
Read more