TUGAS REVIEW APLIKASI FLUTTER

pada tanggal



1. Tampilan Header (Judul Aplikasi)

Potongan Kode:

Container(
  width: double.infinity,
  padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
  color: const Color(0xFF7FB6FF),
  child: const Text(
    'Kartu profil sederhana - Aku & Hobiku',
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
      fontWeight: FontWeight.w700,
    ),
  ),
),

Penjelasan:

Bagian ini menampilkan judul aplikasi di bagian atas dengan latar belakang berwarna biru muda.

  • Container digunakan sebagai wadah utama dengan lebar penuh.

  • Properti color memberi warna latar biru pada header.

  • Widget Text menampilkan tulisan “Kartu profil sederhana - Aku & Hobiku” di tengah dengan warna putih dan huruf tebal.

2. Foto Profil, Nama, dan Sekolah

Potongan Kode:

CircleAvatar(
  radius: 62,
  backgroundColor: Colors.grey.shade200,
  backgroundImage: NetworkImage(
    'https://i.ibb.co/3sf6hFq/Whats-App-Image-2025-10-31-at-13-26-47.jpg',
  ),
),

const Text(
  'DIKA SAPUTRA',
  style: TextStyle(
    color: Color(0xFF1E6FD1),
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
),

const Text(
  'XI RPL 1 SMKN 1 Banjar',
  style: TextStyle(
    fontStyle: FontStyle.italic,
    fontSize: 14,
    color: Colors.black54,
  ),
),

Penjelasan:

Bagian ini menampilkan informasi identitas berupa foto profil, nama, dan keterangan sekolah.

  • CircleAvatar digunakan untuk menampilkan foto berbentuk lingkaran dari URL tertentu.

  • radius menentukan ukuran foto profil.

  • Text('DIKA SAPUTRA') menampilkan nama pengguna dengan warna biru dan huruf besar tebal.

  • Text('XI RPL 1 SMKN 1 Banjar') menampilkan kelas dan sekolah dengan gaya miring serta warna abu-abu muda.

3. Garis Pemisah

Potongan Kode:

const Divider(
  thickness: 1,
  indent: 90,
  endIndent: 90,
),

Penjelasan:

Bagian ini berfungsi sebagai pemisah visual antara data profil dan bagian isi berikutnya.

  • Divider menampilkan garis horizontal tipis.

  • Properti indent dan endIndent membuat garis tidak memenuhi seluruh lebar layar, melainkan hanya di bagian tengah.

4. Bagian “Hobi”

Potongan Kode:

Container(
  padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 18),
  decoration: BoxDecoration(
    color: const Color(0xFFDFF1FF),
    borderRadius: BorderRadius.circular(20),
  ),
  child: Column(
    children: const [
      Text(
        'Hobi',
        style: TextStyle(
          color: Color(0xFF1E6FD1),
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 10),
      Text(
        'Saya memiliki ketertarikan dalam mendengarkan musik, karena musik bisa menemani saya dalam berbagai situasi.',
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 15),
      ),
    ],
  ),
),

Penjelasan:

Bagian ini menampilkan informasi mengenai hobi pengguna.

  • Container digunakan untuk membuat kotak dengan warna biru lembut dan sudut yang membulat.

  • Text('Hobi') menjadi judul bagian.

  • Paragraf di bawahnya menjelaskan hobi mendengarkan musik dengan teks rata tengah.

5. Bagian “Cita-cita”

Potongan Kode:

Container(
  padding: const EdgeInsets.symmetric(vertical: 22, horizontal: 20),
  decoration: BoxDecoration(
    color: const Color(0xFFEAF9FB),
    borderRadius: BorderRadius.circular(20),
  ),
  child: Column(
    children: const [
      Text(
        'Cita-cita',
        style: TextStyle(
          color: Color(0xFF1E6FD1),
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 10),
      Text(
        'Saya ingin menjadi seorang musisi, karena saya ingin menyalurkan perasaan dan cerita hidup lewat nada dan lirik yang bisa didengar banyak orang.',
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 15),
      ),
    ],
  ),
),

Penjelasan:

Bagian ini menampilkan deskripsi cita-cita pengguna.

  • Container berfungsi sebagai latar belakang dengan warna biru kehijauan dan sudut membulat.

  • Text('Cita-cita') menjadi judul utama bagian ini.

  • Teks di bawahnya menjelaskan cita-cita menjadi musisi dengan gaya bahasa deskriptif dan posisi teks di tengah.

6. Struktur Utama Aplikasi

Potongan Kode:

Scaffold(
  backgroundColor: const Color(0xFFE9F4FF),
  body: SafeArea(
    child: SingleChildScrollView(
      child: Column(
        children: [
          // seluruh bagian di atas berada di dalam kolom ini
        ],
      ),
    ),
  ),
),

Penjelasan:

Struktur utama halaman aplikasi diatur menggunakan widget Scaffold.

  • backgroundColor memberi warna dasar biru muda pada halaman.

  • SafeArea memastikan seluruh konten tidak tertutup oleh area sistem seperti status bar.

  • SingleChildScrollView membuat halaman dapat digulir ke bawah jika kontennya panjang.

  • Column digunakan untuk menyusun elemen-elemen tampilan dari atas ke bawah secara berurutan.

Kesimpulan

Kode Flutter tersebut membangun aplikasi Kartu Profil Sederhana – Aku & Hobiku dengan tampilan bersih dan terstruktur. Aplikasi ini menampilkan identitas pengguna, hobi, dan cita-cita dalam desain berbasis warna biru lembut. Setiap bagian disusun menggunakan widget utama Flutter seperti Container, Text, Column, dan CircleAvatar, sehingga menghasilkan tampilan profil pribadi yang rapi, mudah dibaca, dan menarik secara visual.

Komentar

Posting Komentar