Mengenal dan Mempelajari Cara Instalasi Flutter dari Google
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 :
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
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:
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
klik Environment Variables seperti gambar diatas.
Cari direktori path dan klik edit. maka akan muncul jendela seperti ini
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
Lakukan hal yang sama untuk memasang extension dart language. anda hanya tinggal mengetik dart pada kolom pencarian extension.
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.
Kemudian ketikkan nama aplikasi yang akan kita buat.
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 :
Sekarang untuk membuka project yang telah kamu buat dalam visual studio code sebelumnya, cukup klik File pilih open folder.
[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_1″ spacing=”” center_content=”yes” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_left=”” border_radius_bottom_right=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]
Klik dibawah ini untuk informasi tentang IT Training dan Info Loker seputar IT
⇓
[/fusion_text][fusion_button link=”https://api.whatsapp.com/send?phone=62816999735″ text_transform=”uppercase” title=”” target=”_self” link_attributes=”” alignment=”center” modal=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” color=”default” button_gradient_top_color=”” button_gradient_bottom_color=”” button_gradient_top_color_hover=”” button_gradient_bottom_color_hover=”” accent_color=”” accent_hover_color=”” type=”” bevel_color=”” border_width=”” size=”” stretch=”default” shape=”” icon=”fa-whatsapp fab” icon_position=”left” icon_divider=”no” animation_type=”fade” animation_direction=”static” animation_speed=”0.3″ animation_offset=””]Hubungi Kami[/fusion_button][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
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
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.
Kemudian akan menuju jendela android virtual device manajer
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
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.
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
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.
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.
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