LEMBAR PRAKTIKUM SISWA: Seri 2 — Mengenal Struktur Project Flutter & main.dart

Saya buatkan Lembar Praktikum Siswa (LKPD) yang mengakomodasi dua kondisi: siswa yang membawa HP menggunakan DartPad dan siswa yang membawa laptop menggunakan VS Code + Flutter atau environment lain yang sudah siap.

Saya juga buat bagian produk akhir wajib berupa postingan hasil praktikum, lalu link postingan dikumpulkan melalui postingan guru. Pola ini bagus untuk membangun dokumentasi portofolio siswa.

LEMBAR PRAKTIKUM SISWA

PEMROGRAMAN PERANGKAT BERGERAK — FLUTTER

Seri 2 — Mengenal Struktur Project Flutter & main.dart

A. IDENTITAS PESERTA DIDIK

Nama Lengkap: ..................................................................

No. Absen: ....................

Kelas: ....................................

Tanggal: ....................................

Perangkat yang digunakan:

☐ HP / Smartphone

☐ Laptop / PC

Tools yang digunakan:

☐ DartPad

☐ VS Code + Flutter

☐ FlutLab

☐ Lainnya: ....................................

B. JUDUL PRAKTIKUM

🚀 Membuat Aplikasi Flutter Pertama

Pada praktikum ini kita akan belajar mengenal struktur dasar aplikasi Flutter, memahami main.dart, mengenal widget, kemudian membuat aplikasi sederhana.

C. TUJUAN PRAKTIKUM

Setelah menyelesaikan praktikum, siswa diharapkan mampu:

  1. Mengenali lingkungan pengembangan Flutter.
  2. Menjelaskan fungsi main.dart.
  3. Memahami fungsi main().
  4. Memahami fungsi runApp().
  5. Mengenal konsep Widget.
  6. Menggunakan MaterialApp.
  7. Menggunakan Scaffold.
  8. Menggunakan AppBar.
  9. Menggunakan Center.
  10. Menggunakan Container.
  11. Menggunakan Text.
  12. Melakukan perubahan tampilan menggunakan Hot Reload apabila menggunakan Flutter lokal.
  13. Membuat dokumentasi hasil praktikum dalam bentuk postingan.

D. PETUNJUK UMUM

Praktikum ini dapat dikerjakan menggunakan HP maupun laptop.

Jika menggunakan HP

Gunakan:

DartPad

Fokus pada latihan kode dan konsep dasar Flutter.

Jika menggunakan laptop

Gunakan salah satu:

  • VS Code + Flutter SDK
  • FlutLab
  • IDE/environment Flutter lain yang sudah siap

Jika menggunakan VS Code + Flutter, project dapat dibuat dengan:

flutter create belajar_flutter

Kemudian buka project tersebut di VS Code.

E. ATURAN PRAKTIKUM

  1. Kerjakan secara mandiri.
  2. Boleh berdiskusi dengan teman.
  3. Tidak diperbolehkan hanya menyalin hasil teman.
  4. Setiap siswa harus melakukan modifikasi sendiri.
  5. Pahami kode sebelum mengumpulkan.
  6. Jika mengalami error, baca pesan error terlebih dahulu.
  7. Dokumentasikan proses dan hasil.
  8. Setiap siswa wajib membuat postingan hasil praktikum.
  9. Link postingan pribadi dikumpulkan pada postingan guru.

F. KEGIATAN 1 — MENGENAL main.dart

💻 Untuk pengguna laptop

Buka project Flutter.

Cari:

lib/
└── main.dart

Buka file:

main.dart

Amati kode yang tersedia.

📱 Untuk pengguna HP

Buka DartPad.

Buat program Dart sederhana:

void main() {
  print('Saya sedang belajar Flutter');
  print('Saya siswa RPL');
  print('Hari ini saya belajar main.dart');
}

Jalankan program.

Tuliskan hasil yang diperoleh:

................................................................................

................................................................................

G. KEGIATAN 2 — MEMAHAMI main()

Perhatikan:

void main() {
  print('Hello Flutter');
}

Jawablah:

1. Apa fungsi main()?

Jawaban:

................................................................................

................................................................................

2. Apa yang terjadi ketika program dijalankan?

Jawaban:

................................................................................

................................................................................

3. Apa fungsi print()?

Jawaban:

................................................................................

H. KEGIATAN 3 — MENGENAL runApp()

Sekarang kita mulai membuat aplikasi Flutter.

Gunakan kode berikut:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Text('Hello Flutter'),
    ),
  );
}

Tugas

Jalankan program.

Amati tampilan yang muncul.

Pertanyaan

Apa fungsi:

runApp()

Jawaban:

................................................................................

................................................................................

I. KEGIATAN 4 — MENGENAL WIDGET

Perhatikan kode:

Text('Hello Flutter')

Text merupakan salah satu widget Flutter.

Sekarang ubah menjadi:

Text('Saya Sedang Belajar Flutter')

Jalankan kembali program.

Pertanyaan

Apa perubahan yang terjadi?

................................................................................

................................................................................

J. KEGIATAN 5 — MENGENAL MaterialApp

Gunakan kode:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Text('Belajar Flutter'),
    ),
  );
}

Perhatikan hubungan:

main()
   ↓
runApp()
   ↓
MaterialApp
   ↓
Text

Tugas

Ganti teks menjadi:

Saya Siswa RPL

Kemudian jalankan kembali.

K. KEGIATAN 6 — MENGENAL Scaffold

Sekarang kita mulai menggunakan struktur halaman aplikasi.

Gunakan:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Belajar Flutter'),
        ),
        body: const Center(
          child: Text('Halo, Siswa RPL!'),
        ),
      ),
    ),
  );
}

Amati struktur kode.

MaterialApp
     ↓
Scaffold
   ↙   ↘
AppBar  Body
  ↓      ↓
Text   Center
          ↓
        Text

Pertanyaan

  1. Apa fungsi Scaffold?

................................................................................

  1. Apa fungsi AppBar?

................................................................................

  1. Apa fungsi body?

................................................................................

  1. Apa fungsi Center?

................................................................................

L. KEGIATAN 7 — MENGENAL Container

Sekarang kita membuat tampilan lebih menarik.

Gunakan kode:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Belajar Flutter'),
        ),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: Colors.indigo,
              borderRadius: BorderRadius.circular(20),
            ),
            child: const Text(
              'Halo, Saya Sedang Belajar Flutter!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Jalankan aplikasi.

M. KEGIATAN 8 — EKSPERIMEN TAMPILAN

Sekarang lakukan perubahan sendiri.

Eksperimen 1 — Warna

Cari:

color: Colors.indigo,

Ganti dengan warna lain.

Contoh:

color: Colors.blue,

atau:

color: Colors.green,

atau warna lain yang tersedia.

Warna yang saya gunakan:

....................................................

Eksperimen 2 — Ukuran Teks

Cari:

fontSize: 22,

Ganti menjadi ukuran lain.

Ukuran yang saya gunakan:

....................................................

Eksperimen 3 — Radius

Cari:

BorderRadius.circular(20)

Ganti menjadi:

BorderRadius.circular(40)

Amati perubahan bentuk Container.

Eksperimen 4 — Isi Teks

Ganti:

Halo, Saya Sedang Belajar Flutter!

dengan kalimat versi kalian sendiri.

Teks saya:

................................................................................

N. KEGIATAN 9 — HOT RELOAD

Khusus pengguna laptop / FlutLab yang mendukung workflow tersebut

Jalankan aplikasi.

Kemudian ubah salah satu bagian kode.

Contoh:

fontSize: 22,

menjadi:

fontSize: 30,

Gunakan Hot Reload.

Amati apakah perubahan langsung terlihat.

Apa manfaat Hot Reload menurut pemahaman kalian?

................................................................................

................................................................................

Jika menggunakan HP/DartPad

Gunakan tombol Run setelah melakukan perubahan kode.

O. KEGIATAN 10 — TANTANGAN INDIVIDU

Sekarang jangan menggunakan contoh persis dari guru.

Buat aplikasi:

👨‍🎓 "PROFIL SISWA RPL"

Aplikasi minimal menampilkan:

PROFIL SISWA RPL

Nama:
Kelas:
No. Absen:

Sekolah:
SMKN 1 Banjar

Sedang belajar:
Flutter

Status:
🚀 Sedang Belajar

Ketentuan

Gunakan minimal:

MaterialApp
Scaffold
AppBar
Center
Container
Text

Siswa diperbolehkan menambahkan:

Icon
Column
Row
Card
Image
Button

jika sudah memahami penggunaannya.

P. KETENTUAN KREATIVITAS

Setiap siswa WAJIB melakukan minimal 3 modifikasi.

Contoh:

☐ Mengubah warna

☐ Mengubah ukuran teks

☐ Mengubah teks

☐ Mengubah bentuk Container

☐ Menambahkan emoji

☐ Menambahkan Icon

☐ Menambahkan informasi lain

☐ Mengubah susunan tampilan

☐ Menambahkan elemen lain

Tiga modifikasi yang saya lakukan:

1. ................................................................................

2. ................................................................................

3. ................................................................................

Q. CHECKLIST HASIL PRAKTIKUM

Sebelum mengumpulkan, pastikan:

☐ Program dapat dijalankan.

☐ Tidak terdapat error.

☐ Saya memahami fungsi main().

☐ Saya memahami fungsi runApp().

☐ Saya memahami konsep Widget.

☐ Saya menggunakan MaterialApp.

☐ Saya menggunakan Scaffold.

☐ Saya menggunakan Text.

☐ Saya menggunakan Container.

☐ Saya melakukan modifikasi sendiri.

☐ Saya sudah mengambil screenshot hasil aplikasi.

☐ Saya sudah membuat postingan hasil praktikum.

☐ Saya sudah menyiapkan link postingan.

R. 📸 DOKUMENTASI PRAKTIKUM

Dokumentasikan minimal:

1. Screenshot kode

Tampilkan kode yang sudah dibuat.

2. Screenshot hasil aplikasi

Tampilkan hasil aplikasi yang berhasil dijalankan.

3. Screenshot proses

Jika memungkinkan, dokumentasikan proses pengerjaan.

Untuk pengguna laptop dapat memperlihatkan:

  • VS Code
  • Project Flutter
  • Emulator/device

Untuk pengguna HP:

  • DartPad
  • Kode program
  • Hasil Run

S. 📝 TUGAS AKHIR — MEMBUAT POSTINGAN

Setelah praktikum selesai, setiap siswa wajib membuat posting/artikel hasil praktikum.

Postingan dapat dibuat pada blog/platform yang telah ditentukan guru.

Judul postingan

Gunakan format:

Praktikum Flutter Seri 2 — Struktur Project dan main.dart

T. ISI POSTINGAN

Postingan minimal berisi:

1. Identitas

Nama Lengkap: Nama siswa

No. Absen: Nomor absen

Kelas: XI RPL 1 / XI RPL 2 / sesuai kelas

2. Judul Praktikum

Membuat Aplikasi Flutter Pertama

3. Tujuan

Tuliskan secara singkat tujuan praktikum.

Contoh:

Pada praktikum ini saya mempelajari struktur dasar project Flutter, fungsi main.dart, main(), runApp(), Widget, MaterialApp, Scaffold, Text, Container, serta mencoba membuat aplikasi Flutter sederhana.

4. Tools yang Digunakan

Tuliskan sesuai perangkat.

Contoh:

Perangkat : Smartphone
Tools     : DartPad

atau:

Perangkat : Laptop
Tools     : Visual Studio Code + Flutter SDK

5. Kegiatan Praktikum

Ceritakan secara singkat kegiatan yang dilakukan.

Minimal membahas:

  • Mengenal main.dart
  • Mengenal main()
  • Mengenal runApp()
  • Mengenal Widget
  • Membuat MaterialApp
  • Membuat Scaffold
  • Menggunakan Text
  • Menggunakan Container
  • Melakukan modifikasi tampilan

U. 💻 KODE PROGRAM

Masukkan kode program hasil pekerjaan sendiri.

Contoh:

// Tempelkan kode hasil praktikum kalian di sini

Kode yang diposting harus merupakan kode yang benar-benar dikerjakan oleh siswa.

V. 📱 HASIL PRAKTIKUM

Masukkan screenshot hasil aplikasi.

Berikan keterangan di bawah gambar.

Contoh:

Gambar 1. Hasil aplikasi Profil Siswa RPL

W. 💡 REFLEKSI

Jawab pertanyaan berikut dalam postingan.

1. Apa yang saya pelajari?

................................................................................

2. Bagian yang paling saya pahami?

................................................................................

3. Bagian yang masih sulit?

................................................................................

4. Apa yang ingin saya buat dengan Flutter?

................................................................................

X. 📎 PENGUMPULAN LINK POSTINGAN

Setelah postingan selesai:

  1. Publikasikan postingan.
  2. Salin/copy link postingan.
  3. Buka postingan guru yang digunakan sebagai tempat pengumpulan.
  4. Tulis komentar dengan format berikut.

FORMAT KOMENTAR WAJIB

Nama Lengkap:
No. Absen:
Kelas:
Link Postingan:

Contoh:

Nama Lengkap: Ahmad Fauzan
No. Absen: 05
Kelas: XI RPL 1
Link Postingan: https://................

Jangan hanya mengirim link.

Nama lengkap, nomor absen, dan kelas wajib ditulis agar guru mudah melakukan rekap.

Y. ⚠️ PERHATIAN

Pastikan link postingan dapat dibuka.

Sebelum mengirim:

☐ Postingan sudah dipublikasikan.

☐ Link tidak salah.

☐ Link dapat dibuka.

☐ Nama lengkap sudah benar.

☐ Nomor absen sudah benar.

☐ Kelas sudah benar.

☐ Screenshot terlihat jelas.

☐ Kode program sudah dimasukkan.

Z. 🏆 KRITERIA PENILAIAN

KomponenBobot
Persiapan tools10
Pemahaman konsep15
Program dapat dijalankan20
Penggunaan widget15
Kreativitas/modifikasi15
Dokumentasi10
Postingan hasil praktikum10
Ketepatan pengumpulan link5
Total100

⭐ TANTANGAN BONUS

Bagi siswa yang selesai lebih cepat:

Buat tampilan yang lebih menarik dengan menambahkan minimal 3 widget baru yang belum digunakan pada praktikum utama.

Contoh:

Icon
Column
Row
Card
ElevatedButton
CircleAvatar

Kemudian jelaskan fungsi widget yang ditambahkan pada postingan.

🎯 HASIL AKHIR YANG DIHARAPKAN

Pada akhir pembelajaran, setiap siswa menghasilkan:

              PRAKTIKUM
                  │
                  ▼
        Aplikasi Flutter
                  │
                  ▼
         Screenshot hasil
                  │
                  ▼
           Artikel/Postingan
                  │
                  ▼
            Copy Link
                  │
                  ▼
       Komentar di Postingan Guru
                  │
                  ▼
          Penilaian & Rekap

Produk yang dikumpulkan:

1. Program Flutter

2. Screenshot hasil aplikasi

3. Postingan/artikel praktikum

4. Link postingan

5. Komentar pada postingan guru dengan format:

Nama Lengkap:
No. Absen:
Kelas:
Link Postingan:

🚀 PESAN UNTUK SISWA

Jangan hanya membuat aplikasi yang bisa berjalan. Belajarlah memahami bagaimana aplikasi tersebut dibuat.

Setiap error adalah bagian dari proses belajar menjadi programmer.

Coba → Error → Cari tahu → Perbaiki → Jalankan → Dokumentasikan.

Itulah proses belajar seorang developer. 🚀


Konsep Singkat Penugasan ini:

📱 PRAKTIKUM FLUTTER — SERI 2
Struktur Project & main.dart

Halo semuanya 👋
Hari ini kita praktik mengenal struktur dasar project Flutter dan main.dart.

🎯 TARGET
Kalian dapat membuat aplikasi Flutter sederhana menggunakan:
main() → runApp() → MaterialApp → Scaffold → AppBar → Center → Container → Text

💻 PILIH SESUAI PERANGKAT

📱 Jika menggunakan HP:
Gunakan DartPad → https://dartpad.dev
Pilih mode Flutter.

💻 Jika menggunakan Laptop/PC:
Gunakan VS Code + Flutter yang sudah terintegrasi.
Jika belum siap, boleh menggunakan FlutLab.

🧪 TUGAS PRAKTIKUM

1️⃣ Buat aplikasi Flutter sederhana.
2️⃣ Pastikan program bisa dijalankan.
3️⃣ Gunakan minimal widget:

  • MaterialApp
  • Scaffold
  • AppBar
  • Center
  • Container
  • Text

4️⃣ Buat tampilan “PROFIL SISWA RPL” yang memuat:

  • Nama
  • Kelas
  • No. Absen
  • SMKN 1 Banjar
  • Sedang belajar: Flutter
  • Status: 🚀 Sedang Belajar

5️⃣ Kembangkan tampilan kalian sendiri.
Minimal lakukan 3 perubahan, misalnya:
🎨 warna
🔤 ukuran/style teks
🔲 bentuk Container
✨ emoji/icon
📐 tata letak

📸 DOKUMENTASI
Ambil screenshot:
✅ kode program
✅ hasil tampilan aplikasi

📝 TUGAS AKHIR
Buat 1 postingan berisi hasil praktikum dengan judul:

“Praktikum Flutter Seri 2 — Struktur Project dan main.dart”

Isi postingan:

  • Nama Lengkap
  • No. Absen
  • Kelas
  • Tujuan praktikum
  • Tools yang digunakan
  • Hasil praktik
  • Kode program
  • Screenshot aplikasi
  • Refleksi singkat: Apa yang saya pahami setelah praktik hari ini?

🔗 PENGUMPULAN
Setelah postingan selesai, copy link postingan dan tempel di kolom komentar postingan guru.

Format komentar WAJIB:

Nama Lengkap: …
No. Absen: …
Kelas: …
Link Postingan: …

⚠️ Pastikan nama, nomor absen, kelas, dan link sudah benar.

🚀 Bukan sekadar copy-paste kode. Pahami, jalankan, lalu kembangkan tampilannya dengan kreativitas kalian sendiri!


Tidak ada komentar:

Posting Komentar

Categories

Blogger Tricks

Blogger Themes

Klik untuk mencari...