LAPORAN PRAKTIKUM

INSTALASI FLUTTER DAN PROGRAM PERTAMA

Oleh:
Bagus Sajiwo
1121020035

PROGRAM STUDI PEMELIHARAAN KOMPUTER DAN

JARINGAN AKADEMI KOMUNITAS NEGERI PACITAN
TAHUN 2021-2022

1
 Kata pengantar

Puji syukur kita panjatkan kehadirat Allah SWT yang telah memberikan rahmat dan hidayah-Nya sehingga
saya dapat menyelesaikan tugas yang berjudul “Laporan Instalasi Flutter dan Program Pertama ” ini tepat
pada waktunya.

Adapun tujuan dari penulisan dari makalah ini adalah untuk memenuhi tugas pada mata kuliah Praktikum
Mobile Programming .Selain itu,makalah ini juga bertujuan untuk menambah wawasan tentang Praktikum
Mobile Programming dikehidupan sehari-hari bagi para pembaca dan juga bagi penulis.

Saya mengucapkan terima kasih kepada Bapak Anwar Fuadi, S.Kom, M.T.I. selaku Dosen yang telah
memberikan tugas ini sehingga dapat menambah pengetahuan dan wawasan sesuai dengan bidang studi
yang saya tekuni ini.

Saya juga mengucapkan terima kasih kepada semua pihak yang tidak dapat saya sebutkan semua,
terimakasih atas bantuannya sehingga sehingga saya dapat menyelesaikan tugas ini.

Saya menyadari,tugas yang saya tulis ini masih jauh dari kata sempurna. Oleh karena itu,kritik dan saran
yang membangun kami butuhkan demi kesempurnaan makalah ini.

Pacitan, 19 September 2022

Bagus Sajiwo

2
 Daftar Isi
Contents
LAPORAN PRAKTIKUM............................................................................................................................................................1
INSTALASI FLUTTER DAN PROGRAM PERTAMA..............................................................................................................1
Kata pengantar............................................................................................................................................................................... 2
Daftar Isi........................................................................................................................................................................................ 3
BAB I............................................................................................................................................................................................ 4
Uraian Materi................................................................................................................................................................................. 4
Apa itu Flutter?.............................................................................................................................................................................. 4
Cara Kerja Framework Flutter.......................................................................................................................................................5
Kelebihan Framework Flutter........................................................................................................................................................5
Kekurangan Framework Flutter.....................................................................................................................................................7
Perbandingan Flutter vs React Native............................................................................................................................................8
BAB II......................................................................................................................................................................................... 10
Latihan Praktikum Instalasi Flutter dan Membuat Progam Pertama............................................................................................10
Kesimpulan.................................................................................................................................................................................. 18

3
BAB I

CMS

Uraian Materi

Apa itu Flutter?

Flutter adalah platform yang digunakan para developer untuk membuat aplikasi multiplatform hanya
dengan satu basis coding (codebase). Artinya, aplikasi yang dihasilkan dapat dipakai di berbagai
platform, baik mobile Android, iOS, web, maupun desktop.

Flutter memiliki dua komponen penting, yaitu, Software Development Kit (SDK) dan juga
framework user interface.

 Software Development Kit (SDK) merupakan sekumpulan tools yang berfungsi untuk
membuat aplikasi supaya bisa dijalankan di berbagai platform.
 Framework UI merupakan komponen UI, seperti teks, tombol, navigasi, dan lainnya, yang
dapat Anda kustomisasi sesuai kebutuhan.

Flutter juga merupakan platform yang gratis dan open source. Jika Anda ingin menggunakan Flutter,
Anda perlu mempelajari bahasa pemrograman Dart. Berbeda dengan framework front-end pada
umumnya yang menggunakan JavaScript sebagai bahasa pemrogramannya.

Sebelum resmi diluncurkan pada Desember 2018, Flutter sebenarnya telah dikembangkan oleh
Google sejak 2015. Lalu, di tahun 2019, popularitas Flutter mulai meroket dan banyak developer
berbondong-bondong menggunakan Flutter.

(Sumber: statista.com)

4
Cara Kerja Framework Flutter

Cara kerja Flutter sebenarnya cukup sederhana. Berikut ini cara kerja Flutter di platform Android dan iOS:

1. Developer mengembangkan aplikasi dengan kode Dart dan widget yang telah disediakan di framework
Flutter.

2. Jika di Android, kode yang ditulis akan dikompilasi dengan mesin C++ menggunakan Android NDK
(Native Development Kit). Jika di iOS, kode akan dikompilasi dengan mesin dikompilasi dengan LLVM
(Low-Level Virtual Machine).

3. Untuk Android, kode native akan dikompilasi lagi dengan Dart Kompiler.

4. Setelah kode disesuaikan dengan masing-masing perangkat, aplikasi bisa dijalankan di berbagai platform.

Kelebihan Framework Flutter

1. Pengembangan Aplikasi Lebih Mudah dan Cepat

Alasan pertama Anda harus mencoba Flutter framework adalah tersedianya fitur-fitur
yang membantu proses pengembangan jadi lebih mudah dan cepat.

Flutter menyediakan user interface widgets yang dikembangkan oleh Google dengan
kualitas coding yang tinggi. Widgets ini bisa Anda kustomisasi dengan mudah, tanpa
perlu menulis coding dari nol.

Tak hanya itu, Flutter juga memiliki fitur Hot Reload yang akan menampilkan hasil
coding dengan kilat. Jadi, Anda bisa bereksperimen menambahkan fitur dan
memperbaiki bug lebih cepat.

(Sumber: flutter.dev)

Di samping itu, Anda tak perlu menguasai bahasa lain untuk membuat aplikasi di
platform yang berbeda. Cukup manfaatkan widget yang disediakan Flutter, Anda bisa
membuat aplikasi untuk Android dan iOS dalam sekali waktu.
5
2. Custom User Interface yang Menarik

Selain memudahkan developer memuat aplikasi, Flutter juga menawarkan tampilan

user interface aplikasi yang menarik.

Anda bisa memanfaatkan koleksi widget untuk tampilan aplikasi, seperti layout,
navigasi, animasi, style tema, font, hingga pengaturan tampilan scrolling.

Menariknya, widget tersebut bisa Anda kustomisasi sesuai dengan kebutuhan Anda.
Jadi, Anda bisa membuat tampilan aplikasi yang unik dengan mudah.

Berikut ini contoh tampilan desain aplikasi Reflectly yang memenangkan

penghargaan desain aplikasi paling inovatif. Aplikasi ini memiliki transisi yang
smooth, animasi dan gambar yang menarik, hingga tone warna yang pas.

(Sumber: niagahoster.co.id)

Seperti yang bisa Anda tebak, aplikasi tersebut menggunakan framework Flutter
dalam pembuatannya.

3. Performa seperti Aplikasi Native

Walaupun aplikasi Flutter bersifat multiplatform, performa aplikasi yang dihasilkan tak kalah dari
aplikasi native.

Sebab, flutter mengkombinasikan kode aplikasi native dan mesin render yang canggih. Hasilnya,
aplikasi tetap bisa ditampilkan dengan baik di berbagai platform.

Tak hanya tampilan desain yang tetap menarik, performa untuk transisi, scrolling, loading data pun
tetap optimal di segala platform.

Selain memang menyediakan aplikasi dengan performa optimal, Flutter juga loyal membagikan tips
dan trik supaya developer mampu membuat aplikasi yang ringan.
6
 Cara terbaik meningkatkan performa aplikasi adalah dengan melakukan testing dan melihat halaman
metrik performa. Baik itu, metrik kecepatan, memory, app size, dan daya.

Flutter juga sudah menyediakan toolsnya kok, misalnya, Performance Overlay, Widget Rebuild
Tracker, DevTools Memory, dan sebagainya.

Dengan performa yang terjaga, user experience pengguna aplikasi juga bisa meningkat.

4. Biaya Pengembangan Lebih Hemat

Seperti diketahui, Flutter adalah framework pembuatan aplikasi multiplatform. Itu artinya, proses
pengembangan bisa lebih efisien. Jadi, Anda tak perlu membuat aplikasi dua kali untuk platform yang
berbeda.

Ditambah lagi dengan adanya fitur Hot Reload, UI widget, data backend, platform integration,
aksesibilitas dan internasionalisasi, packages dan plugin yang memudahkan developer membuat
aplikasi. Jadi, mereka bisa menghemat tenaga, waktu, dan biaya lebih banyak.

Hal inilah yang jadi salah satu alasan banyak developer menyerbu framework Flutter. Keuntungan ini
tentu sulit Anda dapatkan jika menggunakan framework lainnya yang belum menyediakan fitur
tersebut.

Kekurangan Framework Flutter

Karena platform Flutter adalah framework yang masih terbilang baru, ada beberapa kekurangan
yang juga perlu Anda ketahui untuk mengantisipasinya.

1. Library Pihak Ketiga yang Belum Banyak

Flutter adalah teknologi baru yang mulai naik daun. Karena keberadaannya yang masih
baru, komunitas developernya pun masih berkembang. Alhasil, resource code atau library
yang dimiliki juga masih sedikit.

Library ini adalah sekumpulan fungsi coding yang bisa Anda pakai ulang untuk
memudahkan pembuatan aplikasi. Sayangnya, Anda mungkin belum menemukan banyak
library untuk mengembangkan aplikasi di Flutter. Sehingga Anda harus lebih kreatif dan
melakukan banyak uji coba.

2. Aplikasi yang Dihasilkan Berukuran Besar

Performa aplikasi yang dikembangkan Flutter memang cukup stabil. Namun, aplikasi
tersebut cenderung “berat” atau memiliki ukuran file yang besar.

Sebagai perbandingan, ukuran aplikasi sederhana berupa “Hello World!” di aplikasi native
hanya sekitar 500-an KB. Sementara, di Flutter bisa mencapai 4,7MB.

Hal ini tentu akan memakan banyak ruang penyimpanan perangkat pengguna, bukan? Jika,
ruang penyimpanan pengguna terbatas, performa aplikasi mungkin dapat terpengaruh.
Bahkan, pengguna mungkin jadi mengurungkan niatnya untuk mendownload aplikasi.

3. Perlu Belajar Bahasa Pemrograman Baru

Untuk menggunakan Flutter, Anda perlu mempelajari bahasa pemrograman baru, yaitu Dart.
Bahasa Dart ini juga belum terlalu populer dan meski mulai banyak digunakan oleh para
developer.

7
 Namun, jika Anda telah menguasai bahasa pemrograman Java atau C#, Anda tidak akan
terlalu kesulitan mempelajari bahasa Dart. Pun, Flutter juga telah membuat video tutorial di
channel YouTubenya, untuk memudahkan Anda mempelajari Flutter.

Perbandingan Flutter vs React Native

React Native kini masih menjadi framework aplikasi mobile multiplatform yang paling banyak digunakan.
Namun, melihat perkembangan Flutter yang begitu pesat, popularitas React Native bisa saja tergeser.

Lalu, kira-kira manakah yang terbaik di antara keduanya?

Sebenarnya masing-masing framework memiliki keunggulan dan kekurangan. Untuk memudahkan Anda
memilih, mari simak perbandingan dari beberapa aspek berikut:

1. Kemudahan Penggunaan
Flutter memiliki fitur Hot Reload yang memudahkan developer melihat hasil coding secara real-time.
Selain itu, Flutter memiliki mesin render yang canggih untuk menjalankan kode pada berbagai
platform. Sehingga developer tidak perlu memahami kode native.

Sementara, React Native memiliki kemudahan dalam instalasi framework dengan package installer.
Namun, dalam pengembangan aplikasi, developer React Native tetap harus memiliki kemampuan
native (kode pemrograman khusus platform tertentu).

2. Bahasa Pemrograman yang Digunakan

Dari segi bahasa pemrograman, Flutter menggunakan Dart yang belum begitu dikenal
secara luas. Jika Anda belum menguasai Dart, Anda perlu mempelajari bahasa Flutter
ini dulu.

Berbeda dengan React Native yang dapat digunakan menggunakan JavaScript.

Bahasa pemrograman JavaScript sudah banyak dikuasai oleh developer di dunia.
Bahkan, JavaScript menjadi bahasa pemrograman yang paling banyak digunakan.
Jadi, kesempatan Anda belajar React Native bisa lebih cepat, bukan?

3. Komponen untuk Membuat User Interface

Dari segi pembuatan user interface, Flutter menyediakan widget yang bisa Anda kustomisasi sesuai
kebutuhan.

Ditambah lagi, komponen user interface yang ditawarkan memiliki performa yang menarik, baik dari
transisi, scrolling, teks, hingga animasi. Namun, library dari pihak ketiga yang disediakan oleh Flutter
masih sangat terbatas.

React Native juga menyediakan modul user interface untuk menyusun tampilan yang menarik. Namun,
performa yang ditampilkan tidak semulus dan secantik tampilan Flutter. Dari segi library, React Native
memiliki library yang sudah cukup banyak.

4. Support Komunitas Developer

Seperti diketahui, kedua framework ini merupakan platform open source, di mana setiap developer
bebas mengembangkan aplikasi.

Nah, dari segi komunitasnya, Flutter belum memiliki komunitas yang besar. Hal ini berbeda dari React
Native, yang memiliki komunitas developer lebih besar.

8
Namun, seiring perkembangan Flutter, komunitas mereka bisa semakin besar menandingi React Native

. Berikut perbandingan Flutter vs React Native:

9
 BAB II

Latihan Praktikum Instalasi Flutter dan Membuat Progam Pertama.

1. Langkah pertama yang harus disiapkan adalah :

 Java Development Kit (JDK); bisa di install melalui android studio.

 Android Studio.
 Android SDK.
 Flutter SDK.
 IDE / Teks Editor (disini kita akan menggunakan Visual Studio Code)
 Visual Studio Enterprise 2022

2. Langkah awal yaitu Kunjungi situs resmi Flutter di flutter.dev berikut tampilan website nya.

(Sumber: flutter.dev)

3. Setelah berhasil masuk situs Flutter geser kursor ke arah menu docs pada pojok kanan atas, dan klik
pada menu instal flutter maka kita akan di arahkan ke doc install flutter.

(Sumber: flutter.dev)

1
4. Donwload Flutter, pilih versi sesuai Os yang kita gunakan disini saya contohkan menggunakan Os
Windows. Klik icon Windows lalu akan di arahkan ke halaman Windows install karena saya disini
menggunakan Os Windows. Klik pada tombol yang saya lingkari seperti pada gambar dibawah ini.

(Sumber: flutter.dev)

5. Setelah berhasil donwload extract file zip ke C:\Users\<nama user pc anda (contoh : PC01)>\
Documents), jangan tempel flutter di program files .

6. Setelah itu buka windows environtment, caranya klik start cari / search env pada bar pencarian.
lebih jelasnya seperti gambar dibawah.

1
7. klik pada menu Environment Variables, lalu pada bagian PATH edit sesuaikan folder flutter yang di
tempel pada tahap sebelumnya tadi.

8. Setelah selesai klik OK. langkah berikutnya buka CMD lalu ketikan perintah > flutter. Bila proses
instalasi berhasil maka akan tampil seperti gambar dibawah ini, apabila masih gagal ulangi langkah
dari awal.

1
9. Langkah berikutnya ketik kan perintah flutter doctor pada Cmd, gunanya untuk mengecek apakah
kelengkapan dalam menginstal flutter sudah selesai. Apabila terdapat error ikuti petunjuk yang
tertulis pada cmd untuk mengatasi error tersebut.

10. Seperti gambar diatas terdapat error android licenses not accepted, cara mengatasinya ketikan saja
perintah flutter doctor –android-licenses dan ketik saja ‘Y’ sampai perintah berhenti.

11. Seperti gambar diatas terdapat error Visual Studio – develop for Windows, cara mengatasinya
dengan menginstall Visual Studio Enterprie.

12. Lakukan Instalasi workloads dengan pilihan dekstop development ith C++.

13. Langkah berikutnya ketik kan perintah flutter doctor pada Cmd, gunanya untuk mengecek apakah
kelengkapan dalam menginstal flutter sudah selesai.

1
14. Langkah selanjutnya buka aplikasi VSCode, Anda bisa membuka menu extensions dengan menekan
tombol Ctrl + Shift + X atau dengan langsung mengklik tombol extensions di panel menu sebelah kiri.

15. Buka Menu Extensions.

Anda bisa membuka menu extensions dengan menekan tombol Ctrl + Shift + X atau dengan langsung
mengklik tombol extensions di panel menu sebelah kiri.

16. Install Flutter & Dart Plugin.

1
 Klik hasil yang paling atas.

Klik tombol install.

Tunggu sampai proses selesai.

Ketika kita memasang plugin flutter, harusnya plugin dart juga akan terinstall secara otomatis. Tapi untuk
memastikan lebih jauh, anda bisa mencari plugin Dart dan lihat apakah sudah terinstall atau tidak.

17. Pastikan flutter telah terinstall tanpa error.

Untuk memastikan apakah plugin flutter sudah working terpasang tanpa error:

1. Tekan shortcut ctrl + shift + p

2. Ketik "Flutter"
3. Jika kita mendapatkan hasil seperti ini:

1
18. Pembuatan project baru

Langkah-langkahnya adalah:

1. Ketik shortcut ctrl + shift + p

2. Ketik Flutter
3. Pilih menu Flutter New Application Project

19. Pilih directory.

Pilih lokasi penyimpanan yang anda inginkan. Usahakan nama folder adalah nama yang deskriptif, bukan
nama yang tidak jelas seperti “tes”, “tes123”, dan lain sebagainya.

20. Atur nama aplikasi yang akan dibuat.

Setelah memilih folder, sekarang kita akan beri nama aplikasi atau nama project. Nama aplikasi harus
lowercase dan tidak boleh menggunakan spasi. Di contoh ini, saya menggunakan nama test_drive_app.

Tunggu sampai proses membuat projek selesai. Setelah selesai, vscode akan langsung menampilkan file
main.dart.

1
21. Jalankan aplikasi.

Anda bisa lihat-lihat dulu kode programnya seperti apa. Jika sudah, kita bisa langsung menjalankan
aplikasinya dengan cara menekan tombol F5.

Catatan : Pastikan koneksi internet anda menyala. Dan jika kalian memakai paket data pribadi,
pastikan kuotanya mencukupi. Karena pada saat menjalankan project pertama ini saya pantau cukup
memakan banyak data.

Karena project baru, Flutter akan mengunduh beberapa hal. Tunggu hingga proses selesai. Untuk
menjalankan dichrome kita harus pilih chrome dengan cara klik dibawah bagian kanan.

(Tampilan project pertama flutter di crhome)

1
 Kesimpulan

Flutter adalah framework untuk membuat aplikasi. Framework ini sangat diminati oleh para developer karena
kelebihannya dalam memudahkan pengembang untuk mengembangkan suatu aplikasi. Bahasa dalam framework ini
adalah Dart, yaitu bahasa buatan Google yang diluncurkan pada tahun 2018.

Adapun cara kerja, kelebihan, dan kekurangan dari framework ini. Selain itu, terdapat pula perbandingan antara flutter
dan react native dari segi ease of use, bahasa pemrograman, dukungan komunitas, dan komponen pembuat UI.

10