Membuat AppBar Sederhana & Tata Letak Horizontal di Flutter





Tujuan pembelajaran


* Memahami struktur dasar aplikasi Flutter (`MaterialApp`, `Scaffold`, `AppBar`).

* Membuat AppBar sederhana dengan judul.

* Menata widget secara horizontal menggunakan `Row` atau `Wrap`.

* Menggunakan `Container`, `Padding`, dan `SizedBox` untuk styling dan spasi.

* Menangani tampilan agar tidak overflow di layar kecil (tips responsif).



Penjelasan bagian penting kode


* `MaterialApp`: pembungkus utama untuk aplikasi yang memakai Material Design.

* `Scaffold`: menyediakan struktur dasar halaman (AppBar, body, floatingActionButton, dll).

* `AppBar`: bilah atas yang menampilkan judul aplikasi. Kamu bisa tambahkan ikon atau actions bila perlu.

* `Padding`: memberi jarak dari tepi layar supaya tampilan tidak menempel.

* `Wrap` vs `Row`:


  * `Row` menata anak secara horizontal dalam satu baris. Jika konten lebih lebar dari layar, akan overflow.

  * `Wrap` juga menata horizontal tetapi otomatis membungkus ke baris berikutnya jika tidak muat — lebih responsif.

* `Container`: digunakan untuk memberi latar (warna), padding, borderRadius, dan bayangan kecil agar item terlihat card-like.

* `TextStyle`: atur ukuran teks, fontWeight, warna teks jika ingin.



Tips praktis & troubleshooting


1. **Hot reload**: saat eksperimen, gunakan hot reload agar perubahan kode terlihat cepat tanpa restart penuh.

2. **Overflow**: bila pakai `Row` dan muncul error overflow pada layar kecil, ganti ke `Wrap`, atau bungkus `Row` dengan `SingleChildScrollView(scrollDirection: Axis.horizontal)`.

3. **Spacing**: gunakan `SizedBox(width: ...)` untuk spasi tetap; gunakan `MainAxisAlignment.spaceAround/spaceEvenly` untuk distribusi otomatis pada `Row`.

4. **Tema**: atur `ThemeData(primarySwatch: Colors.green)` supaya AppBar dan komponen lain konsisten.

5. **Aksesibilitas**: perhatikan ukuran teks dan kontras warna agar mudah dibaca.

6. **Testing di berbagai ukuran**: coba di emulator ponsel kecil dan tablet untuk memastikan tampilan tetap rapi.



Latihan lanjutan (saran tugas)


* Tambahkan aksi ketika kotak diklik (pakai `InkWell` atau `GestureDetector`) yang menampilkan `SnackBar`.

* Ganti teks menjadi avatar kecil + nama (pakai `Row` dalam `Container`).

* Buat daftar nama dinamis dari `List<String>` dan tampilkan dengan `map(...)`.

* Implementasikan `AppBar` dengan tombol back, search, atau menu overflow.



Kesimpulan


Dari latihan sederhana ini kamu belajar struktur dasar UI Flutter, mengatur AppBar, dan menata widget horizontal dengan pendekatan yang responsif. Kunci belajar: coba ubah-ubah properti (`padding`, `spacing`, `color`, `borderRadius`) dan lihat langsung hasilnya lewat hot reload — itu cara cepat paham perilaku masing-masing widget.

 


https://zxr006oyxr10.zapp.page/

Komentar

Posting Komentar

Postingan populer dari blog ini

Bloggspot Nasya dwi arini

🌿 Membuat Layout Responsif Sederhana di Flutter Menggunakan Column, Row, Flexible, dan LayoutBuilder  ✨ Pendahuluan Dalam pengembangan aplikasi Flutter, **layout responsif** sangat penting agar aplikasi dapat menyesuaikan diri dengan berbagai ukuran layar, mulai dari smartphone hingga tablet atau desktop. Salah satu cara terbaik untuk membuat tampilan yang fleksibel adalah dengan menggunakan widget seperti `Column`, `Row`, `Flexible`, dan `LayoutBuilder`. Pada artikel ini, kita akan mempraktikkan cara membuat layout responsif sederhana yang cocok untuk pembelajaran siswa. Kita akan membuat tampilan dengan nuansa **hijau soft**, dilengkapi dengan **emoji dan elemen visual menarik** untuk meningkatkan estetika dan kenyamanan pengguna. ---  ðŸ“¦ Struktur Proyek Berikut adalah struktur utama dalam aplikasi ini: * **`MaterialApp`**: Root aplikasi. * **`Scaffold`**: Struktur dasar layout (AppBar + Body). * **`LayoutBuilder`**: Untuk menentukan layout berdasarkan lebar layar. * **`Col...
Baca selengkapnya

10 jenis jenis sistem operasi mobile

Gambar
  & Gratis Headset 10 Orang Tercepat 13   Hari 14   Jam 32   Menit 51   Detik 10 Jenis Sistem Operasi Seluler yang Perlu Anda Ketahui 11 Januari 2024 Jam 8:10 pagi 10 Jenis Sistem Operasi  – Sistem operasi  mobile  atau  mobile  OS adalah sistem operasi untuk ponsel, tablet,  smartwatch  , atau perangkat  mobile  lainnya. Sistem operasi ini berfungsi untuk mengontrol sumber daya hardware maupun software pada perangkat mobile hingga dapat berjalan stabil. Fitur Sistem Operasi Seluler 1. Mudah digunakan Grafiknya harus menarik. Tombol dan fiturnya harus mudah digunakan. Selain itu, fungsinya tidak boleh terlalu rumit. Fitur harus kuat dan berguna. 2. Toko aplikasi yang bagus Aplikasi adalah salah satu bagian dasar dari sebuah OS. Aplikasi yang bagus dan berguna merupakan bagian penting dari sebuah OS. Aplikasinya harus sederhana dan interaktif. 3. Daya tahan baterai yang baik Tenaga merupakan salah satu kebutuhan ut...
Baca selengkapnya

Belajar Flutter: Membuat Aplikasi Sederhana Menampilkan Nama Kelompok dan Foto

Gambar
  Halo teman-teman! Pada kesempatan kali ini, kita akan belajar membuat aplikasi Flutter sederhana yang menampilkan daftar nama anggota kelompok, sebuah foto, dan sebuah tombol yang bisa ditekan untuk menampilkan pesan. Apa yang akan kita buat? Tampilan judul di AppBar Daftar nama anggota kelompok dalam teks Sebuah foto dari internet yang ditampilkan di tengah layar Tombol dengan aksi menampilkan pesan Snackbar Kode lengkapnya akan saya jelaskan langkah demi langkah. Struktur Kode 1. Membuat Aplikasi Flutter Kita mulai dengan fungsi main() yang menjalankan aplikasi Flutter dengan MyApp . void main() { runApp(const MyApp()); } 2. Widget MyApp MyApp adalah widget utama yang menggunakan MaterialApp sebagai root aplikasi. class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Demo Widget Flutter', theme: ThemeData(primarySwatch: Colors.blue), ...
Baca selengkapnya