MEMBUAT TAMPILAN APLIKASI SEDERANA

LATIHAN 1 ( WAJIB ):

Membuat Tampilan Applikasi Sederhana:

AppBar dengan judul
Body berisi Column
Minimal 3 widget text

Eksperimen:

Ubah warna AppBar
Ganti column ke row
Tambahkan padding dan sizedbox

MEMBUAT TAMPILAN APLIKASI SEDERHANA

Pada tugas ini, saya membuat tampilan aplikasi sederhana sebagai latihan awal untuk memahami struktur dasar antarmuka (UI). Pengerjaan tugas dibagi menjadi dua tahap, yaitu latihan dasar dan eksperimen pengembangan tampilan.

Latihan 1: Membuat Tampilan Dasar

Pada tahap latihan, tampilan web dibuat menggunakan komponen dasar dengan ketentuan sebagai berikut:

AppBar
Digunakan sebagai bagian header aplikasi yang menampilkan judul. AppBar berfungsi untuk memberikan identitas atau konteks halaman yang sedang dibuka.
Body dengan Column
Pada bagian body digunakan widget Column untuk menyusun elemen secara vertikal dari atas ke bawah.
Widget Text (Minimal 3)
Di dalam Column terdapat minimal tiga widget Text yang digunakan untuk menampilkan informasi berupa teks.

Latihan ini bertujuan untuk melatih pemahaman mengenai struktur layout dasar dan penggunaan widget text pada tampilan aplikasi sederhana.

Eksperimen: Pengembangan Tampilan

Setelah menyelesaikan latihan dasar, saya melakukan eksperimen dengan mengembangkan tampilan yang sudah ada. Beberapa perubahan yang dilakukan antara lain:

Mengubah Warna AppBar
Warna AppBar diubah agar tampilan terlihat lebih menarik dan tidak monoton.
Mengganti Column menjadi Row
Layout yang sebelumnya disusun secara vertikal menggunakan Column diubah menjadi Row sehingga widget tersusun secara horizontal.
Menambahkan Padding
Padding ditambahkan untuk memberikan jarak antara konten dengan tepi layar agar tampilan tidak terlihat terlalu rapat.
Menambahkan SizedBox
SizedBox digunakan untuk mengatur jarak antar widget sehingga tampilan menjadi lebih rapi dan terstruktur.
Widget Text (Minimal 3)
Pada tahap eksperimen tetap digunakan minimal tiga widget Text sebagai isi utama, sesuai dengan ketentuan tugas.

Source kode ada disini:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Aplikasi Latihan'),
          backgroundColor: Colors.red, // warna AppBar
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Halo Flutter',
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(height: 30),
              Text(
                'Ini adalah aplikasi sederhana',
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(height: 30),
              Text(
                'Sedang belajar layout',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Kesimpulan

Melalui latihan dan eksperimen ini, saya memperoleh pemahaman yang lebih baik tentang penggunaan AppBar, pengaturan layout menggunakan Column dan Row, serta pengaturan jarak menggunakan padding dan SizedBox. Tugas ini membantu saya memahami dasar-dasar pembuatan tampilan UI sederhana yang rapi dan mudah dipahami.

Untuk sebagai contoh ada di link ini

https://zhqs06pbiqt0.zapp.page/#/

Cari Blog Ini

abcdFitopqrstfu