CHALLENGE FLUTTER: MENGANALISIS DAN MEMODIFIKASI PROGRAM MAIN.DART

 

CHALLENGE FLUTTER: MENGANALISIS DAN MEMODIFIKASI PROGRAM MAIN.DART

Nama Lengkap: Muhammad Rasya Raka Pratama

Kelas: XI RPL 1

Nomor Absen: 25

Mata Pelajaran: Pemrograman Mobile

Kelas: XI PPLG

Media Praktikum: DartPad Flutter

Tujuan Pembelajaran

Setelah menyelesaikan praktikum ini, peserta didik mampu:

1. Mengidentifikasi struktur dasar program Flutter.

2. Menjelaskan fungsi widget yang digunakan.

3. Menganalisis alur kerja aplikasi Flutter.

4. Melakukan modifikasi sederhana pada kode program.

5. Mendokumentasikan hasil pembelajaran dalam bentuk artikel blog.

---

Persiapan

1. Buka browser.

2. Kunjungi https://dartpad.dev/flutter

3. Pilih template Flutter.

4. Hapus kode bawaan.

5. Salin kode yang diberikan oleh guru.

6. Klik Run untuk menjalankan aplikasi.

---

TUGAS 1 - MENGAMATI PROGRAM

Jalankan aplikasi dan amati hasilnya.

Jawablah pertanyaan berikut:

1. Apa judul aplikasi yang tampil? Counter App

2. Berapa nilai awal yang ditampilkan? 0

3. Apa yang terjadi ketika tombol "+" ditekan? tampilan nilai angka yang 0 jadi bertambah nilainya

4. Berapa kali nilai bertambah setiap tombol ditekan? 1

---

TUGAS 2 - ANALISIS KODE

Lengkapi tabel berikut.

Kode	Fungsi
main()	Fungsi utama yang pertama kali dijalankan saat aplikasi dimulai.
runApp()	Menjalankan widget utama dan menampilkannya ke layar.
MaterialApp	Widget utama yang menyediakan desain Material Design serta pengaturan aplikasi seperti tema dan navigasi.
Scaffold	Kerangka dasar halaman aplikasi yang menyediakan struktur seperti AppBar, Body, dan FloatingActionButton.
AppBar	Widget yang menampilkan bilah aplikasi di bagian atas layar, biasanya berisi judul dan tombol navigasi.
Text	Widget untuk menampilkan teks pada layar.
FloatingActionButton	Tombol aksi berbentuk lingkaran yang biasanya digunakan untuk menjalankan fungsi utama pada suatu halaman.
setState()	Method yang digunakan untuk memperbarui state dan membangun ulang tampilan (UI) setelah data berubah.

---

TUGAS 3 - ANALISIS ALUR PROGRAM

Berikut urutan kerja program Counter Flutter:

Program dijalankan
        ↓
      main()
        ↓
     runApp()
        ↓
      MyApp
        ↓
    MaterialApp
        ↓
     HomePage
        ↓
     Scaffold
        ↓
Tampilan Counter Muncul
        ↓
 Tombol "+" Ditekan
        ↓
 Function tambahData()
        ↓
    setState()
        ↓
 Nilai Counter Bertambah
        ↓
 Tampilan Diperbarui

Penjelasan Alur
Program dimulai dari fungsi main().
Fungsi runApp() menjalankan widget utama yaitu MyApp.
MyApp membangun tampilan menggunakan MaterialApp.
Halaman utama (HomePage) ditampilkan menggunakan Scaffold.
Nilai counter awal ditampilkan pada layar.
Saat tombol FloatingActionButton (+) ditekan, fungsi tambahData() dipanggil.
Di dalam fungsi tersebut, setState() dijalankan untuk mengubah nilai counter.
Flutter mendeteksi perubahan data dan membangun ulang tampilan.
Nilai terbaru ditampilkan pada layar.

---

TUGAS 4 - MODIFIKASI PROGRAM

Modifikasi 1 – Mengubah Judul Aplikasi

Langkah:

Ubah kode pada bagian AppBar.

Sebelum:

appBar: AppBar(
  title: Text("Counter App"),
),

Sesudah:

appBar: AppBar(
  title: Text("Absensi Siswa"),
),

Hasil:

Judul aplikasi berubah menjadi "Absensi Siswa".

Screenshot: 

Modifikasi 2 – Mengubah Ukuran Teks Menjadi 40

Langkah:

Sebelum:

Text(
  "$jumlah",
),

Sesudah:

Text(
  "$jumlah",
  style: TextStyle(
    fontSize: 40,
  ),
),

Hasil:

Ukuran teks angka menjadi 40.

Screenshot: 

Modifikasi 3 – Mengubah Ikon Tombol

Langkah:

Sebelum:

icon: Icon(Icons.add),

Sesudah:

icon: Icon(Icons.school),

Hasil:

Ikon tombol berubah dari tanda + menjadi ikon sekolah.

Screenshot: 

Modifikasi 4 – Menambahkan Nama Siswa

Langkah:

Tambahkan widget Text.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      "Nama : Ridwan Sahidi Nugraha",
      style: TextStyle(fontSize: 20),
    ),
    SizedBox(height: 10),
    Text(
      "Jumlah : $jumlah",
      style: TextStyle(fontSize: 40),
    ),
  ],
),

Hasil:

Tampilan menjadi:

Nama : Muhammad Rasya
Jumlah : 0

Screenshot: 

---

TUGAS 5 - CHALLENGE MANDIRI

Tambahkan tombol Reset.

Ketika tombol Reset ditekan, nilai kembali menjadi 0.

Petunjuk:

1. Buat function resetData().

2. Isi function dengan setState().

3. Ubah nilai jumlah menjadi 0.

4. Tambahkan tombol baru.

 code :

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: 'Counter App',

      theme: ThemeData(

        primarySwatch: Colors.blue,

        useMaterial3: true,

      ),

      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(

      appBar: AppBar(

        title: const Text('Absensi Siswa'),

        centerTitle: true,

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            const Text(

              'Nama : Ridwan Sahidi Nugraha',

              style: TextStyle(fontSize: 28),

            ),

            const Text(

              'Jumlah :',

              style: TextStyle(fontSize: 28),

            ),

            Text(

              '$jumlah',

              style: const TextStyle(

                fontSize: 48,

                fontWeight: FontWeight.bold,

              ),

            ),

          ],

        ),

      ),

      floatingActionButton: Row(

        mainAxisAlignment: MainAxisAlignment.end,

        children: [

          FloatingActionButton(

            onPressed: resetData,

            child: const Icon(Icons.refresh),

          ),

          const SizedBox(width: 20),

          FloatingActionButton(

            onPressed: tambahData,

            child: const Icon(Icons.add),

          ),

        ],

      ),

    );

  }

}

screenshot : 

---

REFLEKSI

1. Apa fungsi StatefulWidget?

StatefulWidget digunakan untuk membuat tampilan yang dapat berubah selama aplikasi berjalan. Widget ini cocok digunakan ketika data pada layar perlu diperbarui, seperti counter atau absensi.

2. Mengapa program menggunakan setState()?

setState() digunakan untuk memberi tahu Flutter bahwa data telah berubah sehingga tampilan harus diperbarui sesuai data terbaru.

3. Apa yang terjadi jika setState() tidak digunakan?

Data mungkin berubah di dalam program, tetapi tampilan pada layar tidak akan diperbarui. Akibatnya pengguna tidak dapat melihat perubahan yang terjadi.

4. Widget apa yang paling sering digunakan pada program ini?

Widget yang paling sering digunakan adalah:

• Text
• Scaffold
• AppBar
• Column
• FloatingActionButton

5. Apa kesulitan yang Anda temukan selama praktikum?

Kesulitan yang ditemukan selama praktikum adalah memahami fungsi setiap widget, menentukan letak kode yang harus diubah, dan memahami cara kerja setState() agar tampilan dapat diperbarui secara otomatis setelah data berubah.

---

PUBLIKASI HASIL PRAKTIKUM

Setelah praktikum selesai, setiap peserta didik WAJIB membuat artikel blog yang berisi:

Isi Artikel Blog

1. Judul Praktikum.

2. Nama lengkap.

3. Kelas.

4. Nomor Absen.

5. Hasil pengamatan Tugas 1.

6. Jawaban Analisis Kode (Tugas 2).

7. Diagram Alur Program (Tugas 3).

8. Screenshot hasil Modifikasi Program (Tugas 4).

9. Penjelasan Challenge Mandiri (Tugas 5).

10. Refleksi pembelajaran.

11. Kesimpulan.

Judul Artikel Blog

Challenge Flutter - Analisis Program main.dart

atau

Praktikum Flutter: Analisis dan Modifikasi Program Counter App