Challenge Flutter - Analisis Program main.dart



Challenge Flutter - Analisis Program main.dart

Halo teman-teman! 👋

Pada kesempatan kali ini saya akan membagikan hasil praktikum Flutter mengenai analisis dan modifikasi program sederhana. Program yang digunakan merupakan aplikasi penghitung (counter) yang kemudian saya kembangkan menjadi aplikasi Absensi Siswa dengan tampilan yang lebih menarik dan beberapa fitur tambahan.

🔍 TUGAS 1 - HASIL PENGAMATAN

Apa judul aplikasi yang tampil?

Judul aplikasi yang tampil adalah "Absensi Siswa".

Berapa nilai awal yang ditampilkan?

Nilai awal yang ditampilkan adalah 0 (nol).

Apa yang terjadi ketika tombol ditekan?

Saat tombol sekolah ditekan, nilai jumlah pada layar akan bertambah.

Berapa kali nilai bertambah setiap tombol ditekan?

Nilai bertambah 1 setiap kali tombol ditekan.

📝 TUGAS 2 - ANALISIS KODE

KodeFungsi
main()Fungsi utama yang pertama kali dijalankan.
runApp()Menjalankan aplikasi Flutter.
MaterialAppWidget utama untuk mengatur tampilan aplikasi.
ScaffoldKerangka dasar halaman aplikasi.
AppBarMenampilkan judul pada bagian atas aplikasi.
TextMenampilkan teks pada layar.
FloatingActionButtonTombol aksi yang dapat ditekan pengguna.
setState()Memperbarui data dan tampilan aplikasi.

🔄 TUGAS 3 - DIAGRAM ALUR PROGRAM

🚀 Program dijalankan

↓

📱 runApp(MyApp())

↓

🏠 MyApp → MaterialApp → HomePage

↓

🎓 Tombol sekolah ditekan

↓

⚙️ Fungsi tambahData()

↓

🔄 setState()

↓

📈 jumlah++

↓

✨ Tampilan diperbarui

🛠️ TUGAS 4 - HASIL MODIFIKASI

Modifikasi 1 - Mengubah Judul Aplikasi

Saya mengubah judul aplikasi menjadi "Absensi Siswa" agar sesuai dengan tema aplikasi yang dibuat.

Modifikasi 2 - Mengubah Ukuran Teks

Ukuran teks jumlah diubah menjadi 40 sehingga angka lebih mudah dilihat oleh pengguna.

Modifikasi 3 - Mengubah Ikon Tombol

Ikon tombol yang sebelumnya menggunakan ikon tambah diubah menjadi Icons.school agar lebih sesuai dengan tema sekolah.

Modifikasi 4 - Menambahkan Nama Pengguna

Saya menambahkan identitas pengguna pada tampilan aplikasi.

Contoh tampilan:

Nama : Evan

Jumlah : 0

Modifikasi Tambahan

Selain tugas yang diberikan, saya juga mempercantik tampilan aplikasi dengan:

  • Warna tema indigo.

  • Card dengan sudut melengkung.

  • Ikon profil menggunakan CircleAvatar.

  • Tombol Reset berwarna merah.

  • Tampilan yang lebih modern dan rapi.

Ini Untuk Kodenya

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: 'Absensi Siswa',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int jumlah = 0;

  void tambahData() {
    setState(() {
      jumlah++;
    });
  }

  void resetData() {
    setState(() {
      jumlah = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo.shade50,
      appBar: AppBar(
        title: const Text('Absensi Siswa'),
        centerTitle: true,
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
        elevation: 5,
      ),
      body: Center(
        child: Card(
          elevation: 8,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
          child: Container(
            padding: const EdgeInsets.all(30),
            width: 320,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const CircleAvatar(
                  radius: 40,
                  backgroundColor: Colors.indigo,
                  child: Icon(
                    Icons.person,
                    size: 45,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 20),
                const Text(
                  'Nama : Evan',
                  style: TextStyle(
                    fontSize: 26,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const Divider(height: 30),
                Text(
                  'Jumlah : $jumlah',
                  style: const TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                    color: Colors.indigo,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            heroTag: "reset",
            backgroundColor: Colors.red,
            onPressed: resetData,
            child: const Icon(Icons.refresh),
          ),
          const SizedBox(width: 12),
          FloatingActionButton(
            heroTag: "tambah",
            backgroundColor: Colors.indigo,
            onPressed: tambahData,
            child: const Icon(Icons.school),
          ),
        ],
      ),
    );
  }
}

🏆 TUGAS 5 - CHALLENGE MANDIRI

Menambahkan Tombol Reset

Saya menambahkan tombol Reset yang berfungsi untuk mengembalikan nilai jumlah menjadi 0.

Ketika tombol Reset ditekan:

  • Fungsi resetData() dipanggil.

  • Nilai jumlah diubah menjadi 0.

  • setState() memperbarui tampilan aplikasi secara otomatis.

🤔 REFLEKSI PEMBELAJARAN

Apa fungsi StatefulWidget?

StatefulWidget digunakan untuk membuat widget yang datanya dapat berubah selama aplikasi berjalan.

Mengapa program menggunakan setState()?

Karena setState() digunakan untuk memberi tahu Flutter bahwa data telah berubah sehingga tampilan perlu diperbarui.

Apa yang terjadi jika setState() tidak digunakan?

Nilai data mungkin berubah, tetapi tampilan aplikasi tidak akan ikut diperbarui.

Widget apa yang paling sering digunakan?

Widget yang sering digunakan pada program ini adalah Scaffold, AppBar, Text, dan FloatingActionButton.

Apa kesulitan yang ditemukan selama praktikum?

Kesulitan yang saya alami adalah memahami cara kerja StatefulWidget dan setState(), serta mengatur tata letak widget agar tampilan aplikasi terlihat lebih menarik.

📌 KESIMPULAN

Melalui praktikum ini saya belajar mengenai dasar-dasar pengembangan aplikasi menggunakan Flutter. Saya memahami fungsi berbagai widget seperti MaterialApp, Scaffold, AppBar, Text, dan FloatingActionButton. Selain itu, saya juga belajar menggunakan StatefulWidget dan setState() untuk membuat tampilan yang dinamis. Dengan melakukan berbagai modifikasi dan menambahkan fitur Reset, saya menjadi lebih memahami cara mengembangkan aplikasi Flutter yang sederhana namun menarik.

Komentar

Posting Komentar

Postingan populer dari blog ini

2 Artikel tentang Pengembangan Gim

Gambar
Artikel 1: Mengenal Dunia Pengembangan Gim Secara Mendalam Pengembangan gim (game development) adalah proses panjang dan terstruktur dalam menciptakan sebuah permainan digital yang interaktif. Gim dapat dikembangkan untuk berbagai platform seperti PC, konsol, web, dan perangkat mobile (Android & iOS). Saat ini, industri gim menjadi salah satu sektor industri kreatif terbesar di dunia, bahkan melampaui industri film dan musik dari sisi pendapatan. Pengertian Pengembangan Gim Pengembangan gim adalah kolaborasi antara teknologi dan seni. Di dalamnya terdapat berbagai unsur seperti: Pemrograman : untuk mengatur logika dan sistem permainan Desain gim (game design) : untuk menentukan aturan, mekanik, dan pengalaman bermain Seni visual (art & animation) : untuk menciptakan karakter, latar, dan efek visual Audio : meliputi musik latar, efek suara, dan voice over Cerita (narasi) : untuk memperkuat alur dan daya tarik gim Semua unsur ini harus saling mendukung agar gim terasa menarik dan...
Baca selengkapnya

Koleksi Burung Nusantara dengan Flutter: Menyajikan Keindahan Burung Endemik Indonesia

Gambar
  Koleksi Burung Nusantara dengan Flutter: Menyajikan Keindahan Burung Endemik Indonesia Halo teman-teman! 🌿 Kali ini saya ingin berbagi project Flutter terbaru saya:  Koleksi Burung Nusantara . Aplikasi ini saya buat untuk menampilkan berbagai jenis burung endemik Indonesia yang cantik dan unik, lengkap dengan foto, deskripsi, serta fitur favorit. Buat kamu yang suka burung atau tertarik belajar tentang satwa nusantara, aplikasi ini pasti cocok banget! Apa Saja Fitur Unggulan Aplikasi Ini? Carousel Gambar Dinamis Di halaman utama, kamu bisa melihat slideshow gambar burung secara otomatis dengan efek transisi yang halus. Menarik banget buat lihat detail burung satu per satu. Grid Koleksi Burung Semua burung ditampilkan dalam bentuk grid dengan foto dan nama yang mudah diakses. Tinggal klik, langsung ke halaman detail. Detail Burung Lengkap Setiap burung punya halaman khusus yang berisi foto galeri, nama, spesies, dan deskripsi menarik tentang burung tersebut....
Baca selengkapnya