Rangkuman Pembelajaran Flutter

Nama : DAFFA FAIZ AL-GHOZI

Kelas : 11 RPL A
Guru Pembimbing : Pak Heru

A. Tujuan

Dalam satu semester, saya mempelajari banyak widget widget flutter, mulai dari
layouting, text, dan table.

B. Teori Dasar

Flutter adalah kerangka kerja sumber terbuka yang dikembangkan dan didukung oleh
Google. Developer frontend dan full-stack menggunakan Flutter untuk membangun
antarmuka pengguna (UI) aplikasi untuk beberapa platform dengan codebase tunggal.

Saat Flutter diluncurkan pada tahun 2018, Flutter terutama mendukung pengembangan
aplikasi seluler. Flutter kini mendukung pengembangan aplikasi di enam platform: iOS,
Android, web, Windows, MacOS, dan Linux.
C. Alat dan Bahan
Alat :

 Laptop atau Komputer

 Keyboard
 Mouse
Bahan :

 Software Code Editor (Visual Studio Code / Android Studio)

 Internet
D. Materi
 Pengenalan Flutter & Pemasangan SDK Flutter
 Pengenalan Dart dan Penggunaan Dartpad.Dev
 Penggunaan Container
 Penggunaan Gambar
 Row Column
 Stack Align
 Text Field
 Merekayasa Aplikasi WhatsApp
 Quiz
 Table Data
Pengenalan Flutter

Hal pertama yang dilalkukan ketikapertemuan pertama adalah melakukan instalasi

dan pemasangan agar flutter bisa dijalankan.
Cara memasangnya cukup susah bisa dilakukan dengan cara:
1. Mencari aplikasi edit system environment.
2. Buka aplikasinya dan tekan tombol environment variabels.
3. Selanjutnya akan diberi beberapa pilihan, kita hanya perlu mengedit pathnya saja dengan
cara klik tulisan pathnya dan klik tombol edit.
4. Setelah itu buka file explorer.
5. Cari folder android, sdk,bin lalu copy pathnya pastekan ke aplikasi edit system
environment tadi.
6. Lakukan hal yang sama kepada folder flutternya juga.
Setelah SDK Flutter ter install, kita langsung saja install ekstensi Flutter & Dart di
Visual Studio Code.
Sesudah Ekstensi Flutter ter instalasi, Langkah selanjutnya ialah menjalankannya,
yaitu dengan cara :
1. Buka Visual Studio Code.
2. Klik pada tulisan view yang ada di atas.
3. Lalu klik command palete.
4. Setelah itu klik flutter new project.
5. Tunggu beberapa saat maka akan muncul sebuah framework flutter yang bisa kita
gunakan.
6. Saat kita ingin membuat atau menambahkan ataujuga mengedit file bisa kita lakukan
pada folder lib.
Pengenalan Dart

Setelah kita melakukan pemasangan SDK Flutter, sekarang kita mempelajari apa itu
Dart.

Dart adalah sebuah bahasa pemrograman yang dikembangkan oleh Google dan
merupakan bahasa pemrograman resmi untuk Flutter, sebuah UI toolkit dan aplikasi
multiplatform dari Google. Flutter sendiri telah digunakan oleh berbagai perusahaan besar
seperti Google, Alibaba.com, dan Tencent karena dapat menghemat waktu dan tenaga dengan
cara cukup membutuhkan satu codebase untuk mengembangkan aplikasi di berbagai
platform, daripada harus menghabiskan waktu untuk membuat codebase terpisah untuk
masing-masing platform.

 Dart merupakan bahasa yang wajib di kuasai untuk mengembangkan aplikasi Flutter.
 Dengan Dart, kita hanya perlu satu codebase untuk dapat mengembangkan aplikasi
pada berbagai platform seperti web, Android, dan iOS.
 Bahasa Dart dirancang supaya familier dengan bahasa pemrograman lain sehingga
mudah bagi yang sudah mengerti bahasa pemrograman lain maupun bagi yang baru
memulai perjalanannya sebagai developer.
 Penggunaan bahasa Dart itu gratis (open source) dan dikembangkan oleh komunitas
developer ahli yang aktif dan terbuka.
 Dart adalah bahasa yang dioptimalkan untuk pengembangan UI secara cepat dan
produktif pada banyak platform.

Praktek Menggunakan DartPad Dev di websitenya langsung : dartpad.dev

Container
Setelah kita mempelajari sedikit tentang dart, kita langsung mempelajari widget-
widget yang ada di flutter. Salah satunya adalah widget Container. Pada dasarnya Container
itu mirip dengan tag Div di HTML, yaitu sama sama untuk tata letak/layouting.

Memasukkan Gambar di Flutter

Disini cara untuk memasukkan sebuah gambar kedalam aplikasi di flutter adalah
seperti berikut :
1. Pertama-tama kita masukkan file gambar terlebih dahulu kedalam folder assets di flutter
2. Buat folder baru Bernama images
3. Sesudah itu masukkan gambar yang ingin kita masukkan
4. Setelah gambar dimasukkan kedalam folder image, kita buka Visual Studio Code
5. Lalu kita buka file pubspec.yaml di dalam folder yang sama di dalam aplikasi tersebut
6. Sesudah dibuka, lalu scroll kebawah dan anda akan menemukan tempat untuk menyipan
asset gambar yang akan anda masukkan kedalam flutter.
7. Masukkan asset dengan cara seperti berikut :
- assets/images/(gambar yang akan dimasukkan).jpg/png atau bisa dengan yang lain
8. Jika sudah, maka cobalah masukkan gambar tersebut dengan menggunakan tag
Image.Asset(‘Path asset ’),
9. Jika image sudah dimasukkan kedalam folder asset, namun tidak dapat tertampil dalam
flutter, bisa jadi di folder build asset flutter belum dimasukkan oleh file gambar.

Row & Column

Row & Column biasanya digunakan untuk menyesuaikan konten, Row untuk konten
isi dengan arah kebawah atau vertical dan sebaliknya Column itu horizontal.

Stack Align
Kita dapat menimpa konten / apapun itu dengan text dan icon yang lain menggunakan
tag Align().

Text Field
Text field digunakan untuk menginput sebuah text dan biasanya digunakan untuk
membuat formulir atau pendaftaran dalam pembuatan akun.
Merekayasa Tampilan/Layout Aplikasi Whatsapp
Pada pertemuan kali ini, kita diberikan tugas dalam satu minggu untuk membuat dan
merekayasa tampilan aplikasi chatting whatsapp, kita harus membuat 3 layout untuk tampilan
whatsapp yaitu : Chat, Status, dan Panggilan.

Quiz
Di pertemuan kali ini, Pak Heru mengadakan Quiz untuk mengambil nilai dari apa
yang sudah dipelajari oleh kita. Dalam quiz tersebut, kita diberikan waktu selama 2 jam dan
diberikan 3 layout atau tampilan sebuah aplikasi, dan kita disuruh untuk menduplikasi
tampilan tersebut.

Table Data
Di pertemuan terakhir ini, saya mempelajari tag tabledata. Table Data merupakan tag
untuk membuat sebuah Tabel yang dpat berguna untuk menampilkan sebuah data.

E. Kesimpulan

Dalam setengah semester ini, saya mempelajari banyak sekali ilmu baru untuk
mendesain sebuah android dalam flutter. Tata letak untuk android sangat berperan penting
dalam pembuatan system android, karena untuk membuat tata letak android itu sangatlah
sulit.