Laporan Praktikum Aplikasi Mobile 2

Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets

Tugas 1

Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan

Inisialisasi Aplikasi

Langkah pertama adalah inisialisasi aplikasi Flutter.

void main() => runApp(const MyApp()); Ini adalah fungsi utama yang menjadi titik awal eksekusi aplikasi. Fungsi runApp() akan menjalankan widget MyApp sebagai root atau akar dari seluruh aplikasi.
class MyApp extends StatelessWidget : MyApp adalah widget utama aplikasi. Ia didefinisikan sebagai StatelessWidget karena tampilannya tidak akan berubah setelah dibuat (statis).

Struktur Dasar Tampilan

Di dalam build method dari MyApp, kita membangun kerangka dasar aplikasi.

MaterialApp: Widget ini menyediakan fungsionalitas dasar aplikasi seperti tema dan navigasi.
Scaffold: Widget ini menyediakan struktur visual standar untuk halaman aplikasi, yang mencakup AppBar (bilah atas) dan body (konten utama).
AppBar: Digunakan untuk menampilkan judul halaman, contohnya 'Latihan 1: Widget Layout'.

Pengaturan Layout Utama (Vertikal)

Konten utama (body) dari Scaffold diatur untuk menyusun widget secara vertikal dari atas ke bawah.

Padding: Widget ini digunakan untuk memberikan jarak sebesar 16.0 piksel di semua sisi konten agar tidak terlalu mepet ke tepi layar.
Column: Ini adalah widget layout utama yang kita gunakan. Semua widget yang ada di dalam children dari Column akan disusun secara vertikal

Menampilkan Container

Elemen pertama yang diletakkan di dalam Column adalah sebuah Container.

width: double.infinity Mengatur lebar Container agar memenuhi seluruh lebar layar.
height: 100: Memberikan tinggi tetap sebesar 100 px
color: Colors.blueAccent Memberikan warna container biru.
child: const Center(...) Di dalam Container, kita menempatkan Text 'Container' yang diposisikan di tengah.

Pengaturan Layout Horizontal

Setelah Container, kita menambahkan Row untuk susunan horizontal.

const SizedBox(height: 20): Ini adalah kotak tak terlihat yang fungsinya hanya untuk memberikan jarak vertikal sebesar 20 piksel.
Row Widget ini menyusun anak-anaknya (children) secara horizontal dari kiri ke kanan.

Mengisi dan Menata Row

Di dalam Row, kita menempatkan empat widget yaitu dua pasang Icon dan Text dan mengatur posisinya.
mainAxisAlignment: MainAxisAlignment.spaceAround: Properti ini mendistribusikan sisa ruang kosong di dalam Row secara merata di antara setiap elemen, memberikan jarak yang seimbang.

Programnya:

Outputnya:

Tugas 2

Buatlah tampilan yang berisi informasi profile kalian (foto, nama, nim, Alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini.

Struktur Dasar Aplikasi

Sama seperti latihan sebelumnya, aplikasi dimulai dengan struktur dasar Flutter

main() dan MyApp: Menginisialisasi aplikasi dengan MyApp sebagai widget utama (StatelessWidget).
MaterialApp dan Scaffold: Scaffold menyediakan kerangka halaman, termasuk AppBar dengan judul 'Profil Mahasiswa' dan body untuk menampung seluruh konten profil.

Layout Utama dan Penanganan Overflow

Konten profil diletakkan di dalam body dan diatur agar rapi serta dapat di-scroll.

CircleAvatar: Widget ini ideal untuk menampilkan gambar dalam bentuk lingkaran.

radius: 80: Mengatur ukuran lingkaran menjadi 80 piksel.
backgroundImage: AssetImage('assets/images/profil.jpg'): Properti ini digunakan untuk menampilkan gambar sebagai latar belakang lingkaran. AssetImage digunakan untuk memuat gambar dari folder assets/images/ yang ada di dalam proyek.

Menampilkan Foto Profil

Untuk menampilkan foto, digunakan widget CircleAvatar.

Padding: Widget ini digunakan untuk memberikan jarak sebesar 16.0 piksel di semua sisi konten agar tidak terlalu mepet ke tepi layar.
Column: Ini adalah widget layout utama yang kita gunakan. Semua widget yang ada di dalam children dari Column akan disusun secara vertikal

Menampilkan Informasi Teks (Nama dan NIM)

Informasi dasar seperti nama dan NIM ditampilkan menggunakan widget Text

Text: Dua widget Text digunakan untuk menampilkan nama dan NIM.
- style: TextStyle(...): Properti style digunakan untuk mengatur tampilan teks, seperti ukuran font (fontSize), ketebalan (fontWeight), dan warna (color).

Mengelompokkan Informasi Kontak

Informasi kontak yang lebih detail dikelompokkan dalam sebuah Container agar terlihat lebih terstruktur.

Container: Berfungsi sebagai "kartu" atau wadah untuk informasi jurusan, alamat, dan nomor HP.

padding: Memberi jarak antara tepi Container dengan konten di dalamnya.
decoration: BoxDecoration(...): Properti ini digunakan untuk mempercantik Container, seperti memberi warna latar (color: Colors.grey[200]) dan membuat sudutnya melengkung (borderRadius).

Di dalam Container ini, kita menggunakan Column lagi untuk menyusun baris-baris informasi kontak.

Membuat Widget Bantuan yang Reusable

Untuk menghindari penulisan kode yang berulang (setiap baris info terdiri dari Icon dan Text), sebuah widget kustom bernama InfoRow dibuat.

class InfoRow extends StatelessWidget: Ini adalah widget baru yang kita definisikan sendiri. Tujuannya adalah untuk menampilkan satu baris informasi yang terdiri dari ikon dan teks.
Konstruktor InfoRow menerima dua parameter, yaitu icon (IconData) dan text (String).
build Method: Di dalam build method-nya, InfoRow menggunakan widget Row untuk menyusun Icon dan Text secara horizontal. Ini membuat kode di Column utama menjadi jauh lebih bersih dan mudah dibaca.

Menambahkan Tombol Aksi

Di bagian bawah profil, ditambahkan sebuah tombol interaktif.

ElevatedButton: Widget ini digunakan untuk membuat tombol dengan efek timbul (shadow).

onPressed: () { ... }: Properti ini wajib diisi dan akan dieksekusi ketika tombol ditekan. Dalam kasus ini, ia hanya akan mencetak pesan ke konsol.
style: Digunakan untuk mengatur tampilan tombol, seperti warna latar, warna teks, dan padding.
child: const Text('Hubungi'): Menampilkan teks 'Hubungi' di atas tombol.