Praktikum Flutter Seri 2

MEMBUAT APLIKASI PROFIL SISWA RPL DENGAN FLUTTER DI DARTPAD

Flutter merupakan framework yang dapat digunakan untuk membuat aplikasi dengan bahasa pemrograman Dart. Pada praktikum ini, saya membuat aplikasi sederhana berupa Profil Siswa RPL menggunakan DartPad.

DartPad digunakan sebagai tempat untuk menulis dan menjalankan kode Flutter secara online. Dengan DartPad, saya dapat mencoba membuat aplikasi tanpa harus melakukan instalasi Flutter secara langsung di perangkat.

Tujuan dari pembuatan aplikasi ini adalah untuk memahami struktur dasar Flutter, mengenal konsep widget, serta mengetahui cara membuat tampilan aplikasi sederhana.

Aplikasi yang dibuat menampilkan beberapa informasi siswa, yaitu:

Nama: Riska Julia Khaerani

Kelas: XI PPLG 2

No. Absen: 31

Status: Sedang Belajar Flutter

LANGKAH-LANGKAH PEMBUATAN

1. Membuka DartPad

Pertama, saya membuka browser kemudian masuk ke situs DartPad. Setelah halaman DartPad terbuka, saya memilih mode Flutter untuk membuat aplikasi.

2. Membuat fungsi main()

Langkah pertama dalam membuat program Flutter adalah membuat fungsi main(). Fungsi ini merupakan bagian awal yang akan dijalankan ketika program dimulai.

3. Menggunakan runApp()

Setelah membuat main(), saya menggunakan runApp() untuk menjalankan aplikasi Flutter.

4. Membuat StatelessWidget

Selanjutnya saya membuat class ProfilSiswaApp menggunakan StatelessWidget. Widget ini digunakan karena informasi pada profil tidak mengalami perubahan selama aplikasi berjalan.

5. Membuat MaterialApp

MaterialApp digunakan sebagai dasar aplikasi Flutter. Di dalamnya terdapat halaman utama aplikasi.

6. Membuat Scaffold

Scaffold digunakan sebagai struktur dasar halaman. Di dalam Scaffold terdapat AppBar dan Body.

7. Membuat AppBar

AppBar digunakan untuk membuat bagian atas aplikasi. Pada aplikasi ini AppBar diberi judul "Profil Siswa RPL" dan menggunakan warna ungu.

8. Membuat Container

Container digunakan sebagai wadah untuk informasi profil siswa. Container diberikan ukuran, padding, warna, dan sudut yang dibuat melengkung agar tampilannya lebih menarik.

9. Menambahkan informasi siswa

Informasi siswa ditampilkan menggunakan widget Text. Informasi yang ditampilkan adalah nama, kelas, nomor absen, dan status belajar Flutter.

10. Menjalankan aplikasi

Setelah semua kode selesai ditulis, saya menekan tombol Run pada DartPad. Jika tidak terdapat kesalahan pada kode, hasil aplikasi dapat dilihat pada bagian Output.

KONSEP STRUKTUR PROGRAM

Alur sederhana aplikasi ini adalah:

main()

↓

runApp()

↓

MaterialApp

↓

Scaffold

↓

AppBar dan Body

↓

Center

↓

Container

↓

Column

↓

Text

Code :

Hasilnya:

KESIMPULAN

Dari praktikum ini, saya belajar bahwa Flutter menggunakan konsep widget untuk membuat tampilan aplikasi. Setiap widget memiliki fungsi masing-masing dan dapat digabungkan untuk menghasilkan tampilan aplikasi.

Melalui pembuatan Profil Siswa RPL ini, saya menjadi lebih memahami struktur dasar Flutter, penggunaan widget, serta cara menjalankan aplikasi menggunakan DartPad.

Aplikasi ini juga masih dapat dikembangkan, misalnya dengan menambahkan foto profil, biodata lengkap, daftar keahlian, proyek yang pernah dibuat, dan fitur lainnya sehingga dapat menjadi sebuah portofolio siswa RPL.