Membuat Aplikasi Flutter Pertama Menggunakan DartPad

📱 Praktikum Flutter #1

Membuat Aplikasi Flutter Pertama Menggunakan DartPad

Mata Pelajaran: Pemrograman Perangkat Bergerak
Kelas: XI PPLG
Materi: Pengenalan Flutter dan DartPad

---

🚀 Tujuan Praktikum

Pada praktikum pertama ini, siswa belajar mengenal framework Flutter dengan membuat aplikasi sederhana menggunakan DartPad.

Setelah menyelesaikan praktikum, siswa diharapkan mampu:

✅ Mengenal struktur dasar aplikasi Flutter.

✅ Menjalankan aplikasi Flutter secara online.

✅ Memahami fungsi Widget dasar.

✅ Menampilkan teks pada layar aplikasi.

---

📖 Apa itu DartPad?

DartPad merupakan editor online yang disediakan oleh Google untuk belajar bahasa Dart dan Flutter tanpa perlu melakukan instalasi software.

Dengan DartPad, kita dapat langsung menulis kode kemudian menjalankannya melalui browser.

---

🖥️ Hasil Praktikum

Pada praktikum ini siswa berhasil membuat aplikasi sederhana dengan tampilan sebagai berikut.

📷 Preview Aplikasi

(Masukkan screenshot praktikum di sini)

Aplikasi menampilkan:

• AppBar dengan judul Aplikasi Pertamaku
• Tulisan Belajar Flutter Bersama Darsu di tengah layar

Walaupun sederhana, aplikasi ini sudah menunjukkan bagaimana Flutter bekerja menggunakan widget.

---

🏗️ Struktur Program

Program Flutter terdiri dari beberapa bagian penting.

main()
│
└── runApp()
      │
      └── MyApp
             │
             └── MaterialApp
                     │
                     └── Scaffold
                           ├── AppBar
                           └── Body
                                   └── Center
                                          └── Text

---

💻 Kode Program

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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Aplikasi Pertamaku"),
        ),
        body: const Center(
          child: Text(
            "Belajar Flutter Bersama Darsu",
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

---

🔍 Penjelasan Kode

📌 Import Library

import 'package:flutter/material.dart';

Menggunakan library Material Design milik Flutter.

---

📌 Fungsi main()

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

Merupakan titik awal program.

---

📌 MyApp

class MyApp extends StatelessWidget

Widget utama aplikasi.

---

📌 MaterialApp

MaterialApp()

Widget yang menyediakan tema dan struktur aplikasi.

---

📌 Scaffold

Scaffold()

Kerangka tampilan aplikasi.

Di dalam Scaffold terdapat:

• AppBar
• Body
• Floating Button (opsional)
• Drawer (opsional)

---

📌 AppBar

AppBar(
 title: Text(...)
)

Menampilkan judul aplikasi.

---

📌 Center

Center()

Menempatkan widget tepat di tengah layar.

---

📌 Text

Text()

Menampilkan tulisan pada aplikasi.

---

📱 Hasil Tampilan

+--------------------------------+
| Aplikasi Pertamaku             |
+--------------------------------+

       Belajar Flutter
          Bersama Darsu

---

📚 Konsep yang Dipelajari

Selama praktikum ini siswa mengenal widget berikut.

Widget	Fungsi
MaterialApp	Aplikasi utama
Scaffold	Kerangka halaman
AppBar	Header aplikasi
Center	Menempatkan widget di tengah
Text	Menampilkan tulisan

---

🎯 Tantangan Praktikum

Sebagai latihan mandiri, siswa diminta melakukan modifikasi berikut.

✅ Mengubah judul aplikasi.

✅ Mengubah ukuran tulisan.

✅ Mengubah warna tulisan.

✅ Mengubah posisi tulisan.

✅ Mengubah isi teks sesuai nama masing-masing.

Contoh:

Belajar Flutter
Bersama
Andi

---

📝 Kesimpulan

Melalui praktikum pertama ini, siswa berhasil memahami dasar pembuatan aplikasi menggunakan Flutter. Meskipun aplikasi yang dibuat masih sederhana, konsep-konsep penting seperti Widget, MaterialApp, Scaffold, AppBar, Center, dan Text telah berhasil dipelajari sebagai fondasi sebelum membuat aplikasi yang lebih kompleks pada pertemuan berikutnya.

---

📌 Dokumentasi Praktikum

📅 Mata Pelajaran : Pemrograman Perangkat Bergerak
👨‍🏫 Guru : Darsu, S.Kom., Gr.
🏫 SMK Negeri 1 Banjar

"Belajar Flutter dimulai dari langkah kecil. Setiap widget yang dipahami hari ini akan menjadi pondasi untuk membangun aplikasi mobile yang lebih besar di masa depan." 🚀