Tugas Flutter

📱 Tugas Flutter Mandiri – 1 Halaman Aplikasi

📝 Cerita Singkat Kegiatan

Pada pembelajaran Flutter hari ini, saya mengerjakan tugas secara mandiri untuk membuat 1 halaman aplikasi Flutter sederhana. Saya mengombinasikan beberapa widget dasar Flutter seperti MaterialApp, Scaffold, AppBar, Column, Row, Container, serta mencoba eksperimen warna dan tata letak.

Aplikasi berjalan dengan baik tanpa error dan tampilannya dibuat rapi sesuai instruksi pembelajaran hari ini.

📦 Widget yang Digunakan

• MaterialApp → widget utama aplikasi
• Scaffold → kerangka halaman
• AppBar → judul aplikasi
• Column & Row → pengaturan tata letak
• Text → menampilkan teks
• Container → eksperimen warna & padding
• TextField → input teks
• FloatingActionButton → tombol aksi

💻 Kode Program Flutter

main.dart

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,
      title: 'Tugas Flutter Mandiri',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Belajar Flutter'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('Floating Action Button ditekan'),
            ),
          );
        },
        child: const Icon(Icons.add),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Aplikasi Flutter Sederhana',
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            const Text('Nama: Dhanis Fathan Gunawan'),
            const Text('Kelas: XI RPL'),
            const SizedBox(height: 16),
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue.shade100,
                borderRadius: BorderRadius.circular(12),
              ),
              child: const Text(
                'Ini adalah contoh Container',
                textAlign: TextAlign.center,
              ),
            ),
            const SizedBox(height: 20),
            const Text('Masukkan Nama:'),
            const SizedBox(height: 8),
            TextField(
              decoration: InputDecoration(
                hintText: 'Ketik di sini',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: const [
                Icon(Icons.phone_android),
                Icon(Icons.code),
                Icon(Icons.check_circle),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

📸 Dokumentasi

Berikut adalah hasil tampilan aplikasi Flutter dan kode program:

Screenshot Tampilan Aplikasi: