Pembelajaran Mandiri Pemrograman Mobile – Flutter

📱 Pembelajaran Mandiri Pemrograman Mobile – Flutter

Latihan menyusun widget & eksperimen tampilan aplikasi Flutter

Hari ini saya melaksanakan pembelajaran mandiri pada mata pelajaran Pemrograman Mobile (Flutter). Pada kegiatan ini saya berlatih mengombinasikan berbagai widget Flutter dalam satu halaman aplikasi.

Aplikasi yang saya buat menggunakan MaterialApp dan Scaffold sebagai struktur utama. Di dalamnya terdapat AppBar, beberapa Text, Container, TextField, serta FloatingActionButton. Tata letak disusun menggunakan Column, Padding, dan SizedBox agar tampilan terlihat rapi dan nyaman digunakan.

📸 Tampilan Aplikasi Flutter

Screenshot hasil tampilan aplikasi Flutter

🧪 Eksperimen yang Dilakukan

• Mengubah warna AppBar dan Container
• Mengatur jarak antar widget menggunakan SizedBox
• Mengubah susunan widget dari Column menjadi Row

Dari kegiatan ini saya belajar bahwa menyusun tampilan Flutter membutuhkan ketelitian dan kesabaran. Jika terjadi error, saya mencoba memahami penyebabnya dan memperbaikinya secara bertahap.

💻 Kode Program Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Latihan Flutter"),
        backgroundColor: Colors.blueGrey,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text("Tombol ditekan")),
          );
        },
        child: const Icon(Icons.add),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "Pemrograman Mobile",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            const Text("Belajar menyusun widget Flutter"),
            const SizedBox(height: 16),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.blue.shade100,
                borderRadius: BorderRadius.circular(8),
              ),
              child: const Text(
                "Ini adalah contoh Container dengan Padding",
              ),
            ),
            const SizedBox(height: 20),
            const Text("Masukkan nama:"),
            const SizedBox(height: 8),
            const TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: "Nama kamu",
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              "Eksperimen Flutter itu penting",
              style: TextStyle(color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

🚀 Belajar Flutter bukan soal cepat, tapi konsisten dan sabar