Belajar Flutter Basic #1: Mengenal & Install Flutter

Pendahuluan

Perkembangan teknologi dan informasi seiring berjalannya waktu semakin pesat dan gesit. Hal ini tentu saja disebabkan karena tingkat kebutuhan manusia terhadap teknologi semakin membuat candu, selain karena memiliki peran dalam membantu pekerjaan manusia, juga sekaligus menjadi candu bagi para penggunanya.

Dunia pemrograman yang memiliki peran penting dalam perkembangan tersebut, juga mengalami peningkatan yang sangat interaktif, bayangkan saja, lambat laun semakin beragam bahasa pemrograman maupun framework yang dibuat guna meningkatkan produktivitas dan memudahkan pekerjaan bagi para developer.

Flutter kini hadir menjadi bagian dari salah satu framework open-source yang menyemarakkan dunia pemrograman, terkhusus dibidang mobile development.

Baca Juga: Membuat aplikasi POS (Point of Sales) Laravel 5.6 - Transaksi (Bagian 2)

Apa itu Flutter?

Flutter dikembangkan oleh Google sebagai framework untuk membuat UI (User Interface) android dan iOS sekaligus dalam satu frame yang sama dengan menggunakan bahasa pemrograman Dart.

Ada 3 hal yang menjadi poin penting yang ditawarkan oleh Flutter kepada para penggunanya, yakni:

1. Fast Development

   Kamu seorang web programmer? Pasti tidak asing dong dengan proses menerjemahkan code-nya? Yap, begitu code diketikkan, kemudian di-reload maka hasilnya pun sudah dapat dilihat karena menggunakan sistem interpreter. Berbeda halnya, dalam desktop / mobile development, karena menggunakan sistem compiler sehingga perubahan dari code program yang kita punya, harus di-compile terlebih dahulu sebelum dapat ditampilkan.

   Flutter menawarkan fitur Hot Reload yang di-claim dalam hitungan detik kamu sudah dapat melihat terjemahan code program yang telah kamu buat.

2. Expressive and Flexible UI

   Secara default, Flutter menawarkan komponen UI (User Interface) yang menarik dengan proses rendering yang cepat.

3. Native Performance

   Flutter juga menyediakan widgets yang dapat digunakan guna menunjang proses development agar menjadi lebih efisien, seperti scrolling, navigation, icon, dan font. Namun tetap memberikan performance serasa native, baik untuk versi Android maupun iOS.

Persiapan Install Flutter

Terdapat beberapa tahapan yang harus dilakukan sebelum dapat menggunakan Flutter untuk proses development. Berikut beberapa hal yang perlu kamu persiapkan:

System requirements

1. Operation System: Jika kamu menggunakan Windows, minimal versi 7 SP1 atau yang terbaru dan pastikan 64-bit. Sedangkan Linux dan Mac hanya wajib menggunakan 64-bit.

2. Disk Space: Jika kamu menggunakan Windows, sediakan ruang sekitar 400 MB (tidak termasuk tools/IDE). Linux membutuhkan 600 MB dengan ketentuan yang sama, sedangkan Mac membutuhkan 700 MB.

3. Tools: Pastikan kamu telah menginstall git dan dapat digunakan melalui command line.

Install Android Studio

Mungkin sebagian teman-teman bertanya-tanya, kenapa sih harus meng-install Android studio? Kan penggunaan RAM-nya besar? Tenang saja, yang dibutuhkan dari Android studio adalah dependecies yang menyertainya, sehingga kedepannya kita tidak perlu menjalankannya dan dapat menggunakan Editor lain untuk menuliskan code kamu. Berikut beberapa hal yang dibutuhkan Flutter dari Android Studio untuk proses development Android:

1. Android SDK

2. Android SDK Platform-Tools

3. Android SDK Build-Tools

Tahapannya, silahkan download dan install Android Studio sesuai dengan sistem operasi yang kamu punya. Pada kotak dialog "Android Studio Setup Wizard", pastikan kamu meng-install ketiga bagian yang telah disebutkan diatas. Atau kamu dapat ke menu Tools > SDK Manager

Kemudian pilih tab SDK Tools dan centang ketiga komponen diatas

Install Flutter SDK

Selain SDK yang telah didapatkan dari Android Studio, Flutter juga mewajibkan kita untuk meng-install SDK yang telah disediakannya. Berikut adalah beberapa tahapan instalasi Flutter SDK.

1. Buka halaman Flutter Install, kemudian pilih sistem operasi yang kamu gunakan.

   

2. Pada bagian Flutter SDK, download SDK dari link yang telah disediakan.

   

3. Extract file Flutter SDK yang telah kamu download, dan tempatkan dimanapun kamu inginkan (Warning: Jika menggunakan Windows, jangan diletakkan ke dalam folder yang membutuhkan permission, seperti: C:/Program Files). Karena saya menggunakan Linux, saya meletakkannya di dalam folder /home/usersaya/flutter atau ~/flutter .

   

4. Kemudian tambahkan PATH dari Flutter SDK yang telah kita extract

   $ cd ~/flutter
   $ export PATH=`pwd`/bin:$PATH

   Note: Jika kamu menggunakan Windows, pastikan file flutter_console.bat berada di dalam folder flutter, kemudian double click file tersebut.

5. Terakhir, running command: flutter doctor untuk mengecek apakah masih ada dependecies yang belum ter-install.

Nah, seperti yang terlihat, dependecies yang dibutuhkan sudah ter-install sepenuhnya. Sedangkan untuk dua poin terakhir kita abaikan saja terlebih dahulu, karena menggunakan VS Code tidaklah wajib dan Connected Device akan kita bahas pada sub topik selanjutnya.

Setup Android device

Untuk menjadi seorang Android developer, rasa-rasanya tidaklah salah jika harus memiliki modal yang cukup. Kenapa demikian? Karena membutuhkan perangkat diatas rata-rata agar dapat berjalan sebagaimana mestinya, seperti RAM yang cukup untuk menjalankan beberapa tools yang menguras RAM. Berbeda halnya dengan kasus yang saya alami, karena perangkat saya secara default VT (Virtualization Technology) telah di-disabled sejak pertama kali dibeli dan tidak bisa di-enable dari BIOS, sehingga emulator tidak dapat berjalan.

Kata pribahasa "Banyak jalan menuju roma", maka cara lainnya adalah dengan menggunakan perangkat Android (Smartphone) sebagai emulator secara langsung. Berikut beberapa tahapannya:

1. Aktifkan Developer Options dan USB Debugging pada perangkat kamu. Untuk cara mengaktifkannya, dapat kamu lihat pada dokumentasi yang telah disediakan oleh Android Studio.

2. Khusus untuk Windows, silahkan install Google USB Driver.

3. Hubungkan Smartphone kamu menggunakan kabel USB untuk memberikan izin komputer kamu agar dapat mengakses perangkat kamu.

4. Pada terminal, jalankan flutter devices atau bisa juga dengan menggunakan command: flutter doctor untuk mengecek apakah perangkat sudah terhubung atau tidak.

Note: Pastikan kamu telah mengatur environtment variable ANDROID_HOME, jika kamu pengguna linux, tambahkan command berikut ke dalam file .bashrc atau .profile:

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Konfigurasi Editor

Editor memiliki peran penting dalam proses development, tak peduli kamu menggunakan bahasa pemrograman apapun. Flutter sendiri memberikan opsi lain yang dapat digunakan selain Android Studio, yakni VS Code. Berikut beberapa tahapan yang dapat kamu lakukan untuk konfigurasi VS Code:

1. Pastikan kamu telah meng-install VS Code versi terbaru

2. Tekan Ctrl + Shift + P atau View > Command Palette

3. Pada kotak yang tersedia, ketikkan Extensions: Install Extension, kemudian tekan enter

4. Pada kontak pencarian yang tersedia, ketikkan: flutter. Kemudian pilih Flutter, lalu tekan install.

   

   Note: Jangan lupa untuk meng-install Dart plugin juga, pada gambar lokasinya terletak paling bawah.

5. Reload VS Code kamu agar dapat menggunakan extension yang baru saja di-install.

6. Untuk memastikan, buka kembali View > Command palette, kemudian ketikkan Flutter: Run Flutter Doctor. Pastikan output yang kamu terima sama dengan ketika menjalankan command flutter doctor pada terminal.

Baca Juga: Membuat Aplikasi Chatting React Native

Cara Install Flutter

Persiapannya saja sudah sebanyak itu? Jangan jangan instalasinya bakalan lebih banyak lagi? Tenang saja, untuk tahap ini sudah sangat singkat. Jadi sepanjang sub topik sebelumnya, kita menyediakan dependencies yang dibutuhkan oleh Flutter agar dapat berjalan sebagaimana mestinya. Berikut beberapa cara meng-install Flutter, baik menggunakan command line (Terminal / Command prompt) maupun Editor (Vs Code / Android Studio).

Via Terminal / Command Line

Perlu kita ketahui, jika anda seorang web dev, maka sudah menjadi kebiasaan dan keharusan meletakkan project yang sedang kita develop di dalam direktori web server. Berbeda halnya dengan mobile dev, kita bebas meletakkan dimana saja selama kamu dapat mengaksesnya dan sebaiknya jangan diletakkan di restrict area (note: yang membutuhkan permission). So, saya berasumsi teman-teman meletakkan project di dalam direktori development.

Pada command line, arahkan ke dalam direktori development:

$ cd development

Kemudian untuk meng-install Flutter gunakan command:

$ flutter create daengweb

Note: daengweb adalah nama folder dari project yang akan dibuat. Jadi silahkan disesuaikan dengan nama yang teman-teman inginkan.

Ohya, pada screenshoot diatas saya belum menyambungkan perangkat smartphone ke komputer sehingga device tidak terdetect. Apabila proses instalasi telah selesai, masuk kedalam direktori yang baru dibuat, dalam hal ini daengweb dengan command:

$ cd daengweb

Kemudian running command:

$ flutter run

Tunggu hingga proses building selesai

Apabila berhasil dengan catatan device teman-teman sudah dihubungkan atau emulator sudah dijalankan, maka secara otomatis jendela dari aplikasi yang build menggunakan Flutter akan terbuka

Via Editor (Vs Code)

Opsi lainnya meng-install Flutter selain menggunakan command line adalah menggunakan Editor meskipun sebenarnya dibalik proses ini tetap menggunakan command line akan tetapi kita dimudahkan dengan disediakannya GUI, sehingga hanya perlu diklik. Buka View > Command Paletter, kemudian ketikkan:

Flutter: New Project

Kemudian pada kotak yang tersedia, masukkan nama project yang teman-teman inginkan, misal: daengweb,

Kemudian tekan enter. Lalu pilih direktori dimana project tersebut akan disimpan.

Secara otomatis, VS Code akan membuka jendela baru dan menjalankan proses instalasi, tunggu proses tersebut hingga selesai.

Apabila proses tersebut telah selesai, pastikan emulator kamu berjalan atau device kamu terhubung ke komputer, kemudian running Flutter pada menu Debug > Start Debugging atau dengan menekan tombol F5.

Kesimpulan

Flutter menjadi bagian dari hingar bingar dunia pemrograman mobile, maka bijaklah dalam menggunakan framework atau tools apapun itu, jangan terlalu fanatik karena setiap tools punya masanya. Karena yang lebih penting adalah seberapa berguna tools tersebut dalam membantu pekerjaan kita. Sampai jumpa di pembahasan Flutter selanjutnya.