tugas Fitra anzani

 Latihan 1: Membuat Tampilan Sederhana dengan Flutter

Pada latihan ini, kita akan mempelajari dasar pembuatan tampilan sederhana menggunakan Flutter. Tujuan dari latihan ini adalah agar siswa memahami struktur dasar aplikasi Flutter serta penggunaan widget dasar seperti AppBar, Column, dan Text.

ini link tugas yang sudah saya buat:

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

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

🎯 Tujuan Latihan

Memahami struktur dasar Scaffold

Mengenal fungsi AppBar

Mengatur tata letak menggunakan Column

Menampilkan beberapa teks menggunakan widget Text

🧩 Ketentuan Latihan (Wajib)

1. Membuat Tampilan Sederhana

Aplikasi yang dibuat harus memiliki tampilan sederhana sebagai latihan awal. Fokus utama bukan pada desain yang kompleks, tetapi pada pemahaman struktur dan widget dasar Flutter.

2. AppBar dengan Judul

Gunakan widget AppBar untuk menampilkan judul aplikasi di bagian atas layar. Judul ini berfungsi sebagai identitas halaman atau aplikasi yang dibuat.

Contoh fungsi AppBar:

Menampilkan nama aplikasi

Memberi informasi halaman yang sedang dibuka

3. Body Berisi Column

Bagian body pada Scaffold harus menggunakan widget Column. Widget ini digunakan untuk menyusun beberapa widget secara vertikal (dari atas ke bawah).

4. Minimal 3 Widget Text

Di dalam Column, tambahkan minimal tiga widget Text. Widget ini digunakan untuk menampilkan tulisan, seperti:

Nama

Kelas

Jurusan

Atau teks bebas lainnya

🧪 Eksperimen (Pengembangan)

Setelah latihan wajib selesai, lakukan beberapa eksperimen berikut untuk memperdalam pemahaman:

1. Mengubah Warna AppBar

Cobalah mengganti warna AppBar untuk melihat pengaruhnya pada tampilan aplikasi. Ini membantu memahami properti backgroundColor.

2. Mengganti Column menjadi Row

Ubah widget Column menjadi Row untuk melihat perbedaan tata letak.

Column → vertikal

Row → horizontal

3. Menambahkan Padding dan SizedBox

Gunakan:

Padding untuk memberi jarak di sekitar widget

SizedBox untuk memberi jarak antar widget

Hal ini bertujuan agar tampilan menjadi lebih rapi dan mudah dibaca.

✅ Kesimpulan

Melalui latihan ini, siswa diharapkan mampu memahami dasar pembuatan UI di Flutter, mengenal widget dasar, serta mencoba melakukan eksplorasi sederhana untuk meningkatkan tampilan aplikasi.