Memperdalam ui flutter

 Membuat tampilan sederhana 

•appbar dengan judul (Nama Siswa Cerdas) 

•body berisi column 

•minimal 3 widget text


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

Eksperimen

•ubah warna appbar

•ganti column ke row

•tambahkan padding dan sizedbox

Gambar di atas menunjukkan contoh pembuatan User Interface (UI) sederhana menggunakan Flutter. Tampilan aplikasi memiliki AppBar dengan judul “Nama Siswa Cerdas” dan latar warna yang berbeda, seperti ungu dan biru. Pada bagian kanan AppBar terdapat label DEBUG yang menandakan aplikasi masih dalam tahap pengembangan.

Di dalam body aplikasi, ditampilkan daftar nama siswa yaitu Rian, Mizan, dan Desta. Perbedaan dari kedua gambar tersebut terletak pada tata letak teks. Gambar pertama menampilkan nama secara sejajar dalam satu baris, sedangkan gambar kedua menampilkan nama secara vertikal ke bawah sehingga lebih rapi dan mudah dibaca.

Dari tampilan ini dapat disimpulkan bahwa Flutter memudahkan pengembang dalam mengatur desain UI, baik dari segi warna, judul, maupun susunan widget seperti Text dan Column. UI yang sederhana ini cocok digunakan sebagai dasar untuk membuat aplikasi daftar data siswa.

Oleh : Rian Rama Romansah 

Komentar

Posting Komentar

Postingan populer dari blog ini

Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman

Gambar
  Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman Pada pelajaran kali ini, kita belajar bagaimana membuat aplikasi kuliner Nusantara menggunakan Flutter , mulai dari membuat tampilan utama, navigasi antar halaman, hingga implementasi login sederhana di halaman profil. Berikut hal-hal penting yang dipelajari: Struktur Aplikasi Flutter dengan StatefulWidget Kita membuat aplikasi menggunakan StatefulWidget agar aplikasi bisa merespon perubahan data, seperti tema gelap/terang dan daftar favorit kuliner . Navigasi dengan BottomNavigationBar Aplikasi memiliki 5 halaman : Beranda, Kuliner, Pencarian, Favorit, dan Profil. Navigasi dilakukan menggunakan BottomNavigationBar , yang memungkinkan pengguna berpindah antar halaman dengan mudah. Menampilkan Data Kuliner dengan GridView Daftar kuliner ditampilkan menggunakan GridView.builder . Setiap item memiliki gambar dan nama , serta dapat ditandai sebagai favorit . Fitur Favori...
Baca selengkapnya

Materi Widget

Gambar
 Mengenal widget dasar Flutter (Text, Image, Column, Row, Icon, Button) & membuat aplikasi sederhana. 📘 Tugas: Buat aplikasi “Kartu Profil Sederhana – Aku & Hobiku” Syarat: ✅ Minimal 5 widget berbeda ✅ Ada foto/ilustrasi, nama, jurusan ✅ Deskripsi hobi atau cita-cita ✅ Tombol “Hubungi Saya” Hasil :  Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run import 'package:flutter/material.dart'; void main() => runApp(const MyProfileApp()); class MyProfileApp extends StatelessWidget {   const MyProfileApp({super.key});   @override   Widget build(BuildContext context) {     return MaterialApp(       debugShowCheckedModeBanner: false,       home: Scaffold(         backgroundColor: const Color.fromARGB(255, 149, 155, 160),         appBar: AppBar(           title: const Text('Profil'),           backgroundColor: Color.fr...
Baca selengkapnya

2 ARTIKEL PENGEMBANGAN GIM

Gambar
 Artikel 1 Pengertian dan Tahapan Pengembangan Gim Pengembangan gim adalah proses pembuatan permainan digital dari awal hingga siap dimainkan. Proses ini dimulai dari mencari ide, merancang konsep permainan, membuat desain visual, melakukan pemrograman, hingga tahap pengujian. Setiap tahapan harus dilakukan dengan teliti agar gim dapat berjalan dengan baik. Pada tahap perencanaan, pengembang menentukan jenis gim, tujuan, dan aturan permainan. Selanjutnya, pada tahap desain, dibuat karakter, latar, serta alur permainan. Setelah itu, programmer mulai membuat sistem gim agar dapat dimainkan sesuai dengan rencana yang telah dibuat. Tahap terakhir adalah pengujian gim untuk memastikan tidak ada kesalahan atau bug. Jika ditemukan masalah, pengembang akan melakukan perbaikan. Setelah semua tahapan selesai, gim siap untuk dirilis dan dimainkan oleh pengguna. Artikel 2  Perkembangan Pengembangan Gim di Era Digital Pengembangan gim mengalami perkembangan yang sangat pesat seiring dengan...
Baca selengkapnya