Flutter merupakan framework unggulan yang digunakan untuk menciptakan antarmuka aplikasi yang dapat berjalan diberbagai platform, yaitu platform android dan ios. Flutter diciptakan dan di kembangkan oleh google. Flutter ini bersifat open source, sehingga banyak yang menggunakannya. Dengan flutter Anda dapat mengembangkan aplikasi dengan cepat, performa sekelas native, dan tentunya user interface dalam flutter sangat fleksibel dan dapat dibuat dengan mudah oleh Programmer pemula. Flutter menggunakan bahasa pemrograman dart. Bahasa ini adalah bahasa yang mirip seperti c++. Jadi sangat simple dalam penulisannya.

Jika Anda tertarik menggunakan atau mempelajari Flutter, berikut cara instalasi Flutter yang bisa Anda lakukan.

Instalasi Flutter

Dalam dokumentasi flutter telah tersedia informasi instalasi secara lengkap, cuman disini saya agak sedikit mengulas tentang instalasi flutter secara singkat aja. Harapannya agar mudah di pahami dan menjadikan artikel yang tersambung nantinya. Untuk memulainya hal pertama. Anda bisa kunjungi website resmi flutter

Kemudian klik GET STARTED seperti gambar dibawah ini :

Flutter

Image Source : initekno

Maka anda akan di arahkan pada pilihan instalasi, apakah ingin menggunakan windows, macos atau linux. Jika Anda menggukana sistem operasi windows 10. maka pililah instalasi menggunakan windows.

Disini Anda akan disarankan untuk segera melakukan instalasi GIT terlebih dahulu. karena kita akan menggunakan proses kloning dengan GIT. proses kloning GIT ini kan sedikit membutuhkan waktu lama, tergantung dari kecepatan internet di tempat kamu.

Buka command prompt Anda dan tuliskan seperti berikut ini

Flutter

Buatlah  folder baru, dan letakkan pada direktori C:/ kemudian jalankan perintah seperti gambar diatas. Perintah diatas akan mendownload komponen flutter kedalam direktori yang telah kita buat. Perhatikan proses kloning dalam gambar berikut ini:

Flutter

 

Disini berarti installasi fultter telah selesai. sekarang anda hanya perlu mendaftarkan path flutter pada system variable windows Anda.

Membuat Path Pada Windows

Untuk mendaftarkan path flutter, caranya adalah buka folder yang tadi telah anda buat di direktori C:/… kamudian masuk pada ditektori berikut C:\flutter\flutter\bin. Direktori ini yang nantinya akan kita daftarkan dalam path windows kita.

Caranya, Anda harus menuju Sytem properties yang berada di control panel->system, kemudian pilih advanced system settings

Flutter

klik Environment Variables seperti gambar diatas.

Flutter

Cari direktori path dan klik edit. maka akan muncul jendela seperti ini

Flutter

Untuk menambahkan klik new->kemudian masukkan path flutter yang telah kita buat pada direktori c:/flutter/clutter/bin

Ketika sudah klik ok. ketika kita nantinya menjalankan perintah flutter doctor maka tidak akan terjadi masalah karena engine flutter sudah didaftarkan pada path sistem operasi kita.

Baca juga artikel lainnya : Belajar Mengenal Bahasa Pemrograman Kotlin

Membuat Project Flutter di Visual Studio Code

Visual studio code memberikan kemudahan dalam melakukan coding dengan flutter, terutama visual code mendukung penuh instalasi dart kode. Banyak orang sekrang beralih menggunakan editor ini. di karenakan banyaknya dukungan bahasa pemrograman membuat editor ini di sukai oleh para developer.

Kemudian Anda di haruskan untuk melakukan instal extension flutter dan dart language. silahkan klik pada extension atau bisa menekan tombol ctrl+shift+x. maka jendela extension akan terbuka pada visual studio code. kemudian klik instal

Flutter

Lakukan hal yang sama untuk memasang extension dart language. anda hanya tinggal mengetik dart pada kolom pencarian extension.

Flutter

Setelah selesai Anda sudah bisa membuat projek flutter.

Dengan menggunakan visual code kita tidak perlu lagi menggunakan terminal dan ketik secara manual dalam membuat project. cukup masuk padav view->command palette atau menekan tombok keyboard CTRL+SHIFT+P , lalu ketikkan Flutter: New Project kemudian tekan enter.

Flutter

Kemudian ketikkan nama aplikasi yang akan kita buat.

Flutter

Dan selesai dengan cepat. tanpa harus berpindah direktori yang ribet dalam memulai project di flutter. Jika Anda membuat sebuah project dengan memberi nama pendaftaransiswabaru maka hasil dari project bawaan akan tampil seperti ini :

Flutter

Sekarang untuk membuka project yang telah kamu buat dalam visual studio code sebelumnya, cukup klik File pilih open folder.


Klik dibawah ini untuk informasi tentang IT Training dan Info Loker seputar IT


Instalasi Android Studio

Android studio merupakan syarat yang wajib untuk diinstal jika akan membuat aplikasi di flutter. Karena dalam android studio ada beberapa komponen penting yang akan menjadi pendukung pengembangan aplikasi berbasis android pada flutter berjalan. Salah satunya emulator tadi.

Download terleih dahulu android studio pada situs resminya

Flutter

Kemudian jalankan hasil downlod android studio tadi.

Anda hanya perlu mengikuti instruksinya maka kamu akan berhasil melakukan instalasi android studi. Disini kita tidak akan menggunakan android studio secara utuh. jadi hanya cukup melakukan instalasi semata. kemudian yang justru penting yaitu menjalankan emulator androidnya. ikuti terus tutorialnya.

Membuat Emulator Android

Ada 3 pilihan untuk bisa menjalankan project flutter yang kita buat. pertama menggunakan emulator resmi dari android studio, kemudian menggunakan emulator ringan yaitu genymotion dan yang terakhir langsung debug pada smartphone kita melalui koneksi USB mode. kali ini saya akan menggunakan emulator bawaan android studio

Klik avd manajer pada android studio. ini berada di sebelah kanan pada layar monitor Anda.

Flutter

Kemudian akan menuju jendela android virtual device manajer

Flutter

Klik create virtual device seperti gambar diatas.

Dalam categori pilih phone. sedangkan untuk jenis devicenya. Anda bisa menggunakan Nexsus dengan ukuran 5.2 inchi dan resolusi full HD dengan kerapatan piksel 420 ppi. klik next untuk melanjutkan step berikutnya

Flutter

Pilih dan download x86 images klik next. jika belum ada, Anda di haruskan untuk melakukan download android terlebih dahulu. jadi disini pastikan komputer kamu terkoneksi dengan internet yang memadai, karena file android rom disini tidak sedikit ukurannya. Apalagi jika Anda menggunakan android oreo. klik next untuk melanjutkan langkah nya.

Flutter

Kemudian muncul pengaturan nama avd dan ukuran setup orientasi layar. di sini kita memilih menggunakan orientasi potrait atau layar tegak. klik finis untuk mengakhiri langkah ini

Flutter

Maka akan terbentuk emulator seperti gambar di bawah ini. disini kamu bisa membuat lebih dari 1 emulator tentunya dengan android yang berbeda. Kemudian klik tombol play berwarna biru. Maka android emulator akan menjadi seperti ini.

Flutter

Gambar di atas ini menunjukkan bahwa emulator yang kita buat telah berhasil di jalankan. Jika kamu menggunakan RAM dengan kapasitas 8 GB maka prosesnya akan lebih cepat.

Nah sampai sini selesai. dan anda nantinya akan melihat setiap perubahan aplikasi yang di lakukan pada emulator androit ini. jangan lupa tutup android studi dan android device manajernya, jika emulator ini sudah berjalan. hal ini di gunakan untuk menghemat RAM pada komputer anda tentunya.

Baca juga artikel lainnya : Ini Kode Etik Analis Sistem yang Perlu Kamu Ketahui

Mengenal Komponen Project Flutter

Untuk susunan project flutter yang nantinya akan tercipta adalah seperti ini. Dimana ada beberapa poin yang nantin akan kita sering otak atik. Untuk lebih jelasnya sudah saya tunjukkan pada poin poin 1-3 di gambar bawah ini

Poin 1 : Adalah kerangka dasarnya untuk app yang berjalan pada platform android, karena kita akan membuat di platform android maka poin pokoknya saja yang akan kita ambil, yaitu di dalam folder android.

Poin 2 : Disini adalah pemrograman inti dari flutter itu sendiri. dimana di folder lib ini kita akan sering bermain membuat file merubah file dan hapus file dari source yang kita buat.

Poin 3 : Dan poin yang terakhir yaitu pubspec.yaml apa itu?.. ini adalah tempat dimana kamu bisa memanggil library bantuan dari luar. Selain itu kamu juga bisa memanggil file gambar, jenis font app maupun data json lokal bisa di panggil dari di app, syaratnya hanya mendaftarkannya dalam pubspec.yaml ini.

Menjalankan Program Flutter

Ketikkan pada CMD Anda, untuk melakukan cek kesiapan komponen yang dibutuhkan flutter.

Flutter dokter akan melakukan pemeriksaan apakah peralatan yang di perlukan telah siap atau belum. Jika masih ada beberapa komponen yang belum terpasang maka otomatis kita disuruh untuk melakukan cek ulang komponen yang belum terpasang tersebut.

Jika berhasil, semua komponen telah diinstal sehingga tidak ada masalah lagi atau No Issues found!

Untuk menjalankan flutter kamu hanya perlu menekan tombol F5 pada keyboard. atau menekan tombol play yang berwarna biru pada visual studio code atau bisa ketika perintah ini pada terminal visual studio code.

Jika masih menemui error dalam android toolchain, maka silahkan ketikkan kode berikut pada emulaor terminal visual studio code. Pastikan sambungan internet anda aktif, karena akan mengunduh beberapa komponen tambahan

Silahkan lihat gambar di bawah ini.


TOG Indonesia can provide IT professionals for temporary, fixed-period placement in your company for project-based assignments:  IT Developer, Software Tester, Project Manager, Business Analyst, System Analyst, Security Engineer, etc.

Please FOLLOW our Social Media: —> Facebook, Twitter, Instagram, and Linkedin

We provide competent trainers in the field of Information and Technology with a certified and proven track record for developing human resources from leading multinational and national companies in Indonesia. To formalize the training program while creating a strong foundation for educational programs, Triple One Global Indonesia develops by combining high quality IT education and IT Training to add broad insights into the latest developments.tog indonesia


Dengan mengembangkan aplikasi mobile menggunakan flutter rasanya untuk saat ini tidak ada 2nya. bahkan jika kalian sudah paham kode dan kegunaan dalam flutter dan bahasa dart, maka kamu tidak akan berpindah kelain tool. Seperti react native, ionic, xamarin atau malah native dengan Java dan Kotlin sekalipun.

Jika Anda seorang Programmer serta sedang mencari pekerjaan menjadi Programmer, Anda bisa menghubungi kami. Karena ada ribuan lowongan pekerjaan di bidang IT yang menunggu untuk kamu lamar. silakan klik link di bawah ini.

Contact

Phone: 021-21192578, WhatsApp: 0816999735
Email: recruitment@tog.co.id