memperdalam ui flutter

 
Membuat UI Flutter

Flutter merupakan framework dari Google yang digunakan untuk membangun antarmuka (User Interface/UI) aplikasi mobile dengan tampilan yang menarik dan responsif. Pada gambar di atas ditunjukkan contoh pembuatan UI sederhana menggunakan Flutter dengan memanfaatkan widget dasar seperti AppBar, Column, dan Row.

Pada gambar pertama, tampilan aplikasi memiliki AppBar berwarna biru dengan judul “Desta Latihan”. Di bawahnya terdapat susunan Column yang ditampilkan secara vertikal. Setiap bagian diberi warna berbeda, yaitu merah untuk Column 1, hijau untuk Column 2, dan biru untuk Column 3. Hal ini menunjukkan penggunaan widget Column untuk menyusun elemen secara ke bawah.

Sementara itu, pada gambar kedua ditampilkan penggunaan widget Row. AppBar berwarna ungu dengan judul “Desta” berada di bagian atas. Di bawahnya terdapat tiga kotak berwarna merah, hijau, dan biru yang disusun secara horizontal dengan label Row 1, Row 2, dan Row 3. Susunan ini menunjukkan fungsi widget Row dalam menata elemen dari kiri ke kanan.

Dari kedua tampilan tersebut dapat disimpulkan bahwa Flutter memudahkan pengembang dalam mengatur tata letak UI menggunakan widget sederhana. Dengan mengombinasikan Row dan Column, pengembang dapat membuat berbagai desain antarmuka aplikasi sesuai kebutuhan dengan cepat dan rapi.


https://zb9o06v8b9p0.zapp.page/#/
before




https://zf1po06a4f1pp.zapp.page/#/
affter

Kesimpulan

Berdasarkan tampilan UI pada gambar di atas, dapat disimpulkan bahwa Flutter menyediakan cara yang mudah dan fleksibel untuk membuat antarmuka aplikasi. Penggunaan widget Column dan Row memungkinkan pengembang mengatur tata letak elemen secara vertikal maupun horizontal dengan rapi. Dengan memanfaatkan widget dasar dan pengaturan warna, UI aplikasi dapat dibuat sederhana namun tetap jelas dan menarik. Hal ini membuktikan bahwa Flutter sangat efektif digunakan dalam pengembangan UI aplikasi mobile.

Komentar

Posting Komentar

Postingan populer dari blog ini

artikel tentang pengembangan gim

Gambar
 Berikut 2 artikel tentang pengembangan gim Artikel 1: Proses Pengembangan Gim dari Ide hingga Rilis Pengembangan gim merupakan proses kreatif yang memadukan teknologi, seni, dan logika. Proses ini dimulai dari sebuah ide sederhana yang kemudian dikembangkan menjadi gim yang dapat dimainkan dan dinikmati oleh banyak orang. Tahap pertama dalam pengembangan gim adalah perencanaan ide dan konsep. Pada tahap ini, pengembang menentukan genre gim, target pemain, alur cerita, serta tujuan permainan. Ide yang matang akan memudahkan proses pengembangan selanjutnya. Tahap kedua adalah desain dan pembuatan aset. Pengembang mulai merancang karakter, latar, aturan permainan, serta antarmuka pengguna. Desain yang menarik sangat penting agar pemain merasa nyaman dan tertarik saat bermain. Selanjutnya adalah pemrograman dan pengujian. Pada tahap ini, gim mulai dibuat menggunakan bahasa pemrograman atau game engine seperti Unity atau Unreal Engine. Setelah itu, gim diuji untuk memastikan tidak ada ...
Baca selengkapnya

membuat aplikasi to-do list sederhana dengan flutter

Gambar
  💻 Membuat Aplikasi To-Do List Sederhana dengan Flutter 🗓️ Hari/Tanggal Jumat, 10 Oktober 2025 👨‍💻 Nama (Desta Adila Kusuma) – Kelas XI PPLG 1 🔹 Pendahuluan Hari ini kami belajar mandiri dengan materi “Mengenal Lebih Dalam Widget Flutter” . Flutter adalah framework yang digunakan untuk membuat aplikasi mobile, web, dan desktop menggunakan bahasa Dart . Tugas kali ini adalah membuat aplikasi To-Do List sederhana , yaitu aplikasi untuk mencatat daftar kegiatan atau tugas harian. 🔹 Tujuan Pembelajaran Memahami dasar penggunaan widget di Flutter Mampu membuat aplikasi sederhana dengan logika penambahan dan penghapusan data Melatih kemandirian dalam belajar dan eksplorasi kode 🔹 Langkah-Langkah 1️⃣ Buka situs https://dartpad.dev 2️⃣ Salin kode berikut ke editor DartPad: import 'package:flutter/material.dart'; void main() { runApp(const ToDoApp()); } class ToDoApp extends StatelessWidget { const ToDoApp({super.key}); @override Widget buil...
Baca selengkapnya

Membuat Aplikasi To Do List Sederhana Menggunakan Flutter

Gambar
Membuat Aplikasi To Do List Sederhana Menggunakan Flutter Pendahuluan Flutter adalah framework UI open-source dari Google yang memungkinkan pengembang membuat aplikasi Android dan iOS dari satu basis kode. Flutter menggunakan bahasa pemrograman Dart dan menyediakan banyak widget siap pakai untuk membangun antarmuka yang modern dan responsif. Pada artikel ini, akan dibahas pembuatan aplikasi To Do List sederhana menggunakan Flutter. Aplikasi ini memungkinkan pengguna untuk: Menambahkan task Menandai task sebagai selesai Menghapus task dengan swipe Menampilkan tampilan UI yang menarik dengan Material 3 dan gradient Tujuan Aplikasi Tujuan dari pembuatan aplikasi ini adalah: Memahami penggunaan StatefulWidget Mengelola data menggunakan List dan Class Model Menggunakan Checkbox, Dismissible, dan ListView Menerapkan desain UI sederhana namun modern Struktur dan Konsep Aplikasi Aplikasi To Do List ini menggunakan beberapa konsep utama Flutter: MaterialApp sebagai root aplikasi State Managemen...
Baca selengkapnya