Membuat Aplikasi Android dan IOS Dengan Flutter. Mengenal dan Instalasi Flutter

Flutter adalah framework unggulan yang digunakan untuk menciptakan antar muka aplikasi yang berjalan dilintas platform, yaitu platform android dan ios. Flutter diciptakan dan di kembangkan oleh perusahaan internet terbesar yaitu google. Flutter bersifat open source, sehingga banyak yang menyukainya. Dengan flutter kamu dapat mengembangkan aplikasi dengan cepat, performa sekelas native, dan tentunya user interface dalam flutter sangat fleksibel dan dapat dibuat dengan mudah oleh programmer flutter pemula.

Mengenal Flutter

Mungkin kalian masih agak sedikit asing dengan kata-kata flutter ini. Tetapi lambat laun kalian akan mengerti betapa besar manfaat yang kalaian temukan ketika mempelajari framework ini nantinya.

Sebelumnya sudah saya sedikit singgung mengenai framework flutter ini dalam artikel yang berjudul ” mengenal framewok untuk pembuatan aplikasi mobile multiplatform” silahkan baca terlebih dahulu.

( Baca : Mengenal Framework Untuk Pembuatan Aplikasi Mobile Multiplatform )

Kemudian disisi lain mungkin kalian berfikir, kenapa saya harus mempelajar flutter?, apa manfaatnya?, toh sekarang sudah ada kotlin yang sama-sama bagus digunakan untuk membuat aplikasi mobile. Mungkin jawaban dari pemikiran seperti ini adalah singkat mas bro. Dengan fluter, kamu dapat membuat aplikasi didua platform sekaligus, yaitu IOS dan Android dengan hanya membuat codebase satu kali.

Apa lagi flutter menerapkan teknologi fast build. Mungkin biasanya para programmer native murni agak lama ketika akan melihat sedikit perubahan dalam program mereka, karena proses build dalam android studio memang memakan waktu terlebih lagi jika spesifikasi komputer kamu minim, beda halnya dengan flutter.

Proses build bisa di percepat lagi lo bro.. Jika kamu menggunakan emulator genymotion dan visual studio editor. puuh.. saya jamin kamu bakalan terkagum-kagum.. sebab proses build yang di tawarkan terbilang cepat. dengan hanya hitungan menit perubahan aplikasi sudah bisa di lihat dalam emulator.

( Baca : 7 Text Editor Populer Programmer di Tahun 2018 )

Kemudian apalagi yang istimewa?. Flutter menggunakan bahasa pemrograman dart. Bahasa ini adalah bahasa yang mirip seperti c++. jadi sangat simple dalam penulisannya. dalam initekno memang belum kita bahas mengenai bahas pemrograman dart ini. semoga segera terrealisasi untuk pembahasan dart secara mendasar. hal ini paling tidak menjadi bekal kamu dalam memulai dengan flutter.

Instalasi Flutter

Dalam dokumentasi flutter telah tersedia informasi instalasi secara lengkap, cuman disini saya agak sedikit mengulas tentang instalasi flutter secara singkat aja. harapannya menjadikan artikel yang tersambung nantinya. Untuk memulainya hal pertama

Kamu bisa kunjungi website resmi flutter di www.flutter.io

kemudian klik GET STARTED seperti gambar dibawah ini :

Maka kamu akan di arahkan pada pilihan instalasi, apakah menggunakan windows, macos atau linux. Disini saya menggukana sistem operasi windows 10. maka pililah instalasi menggunakan windows.

Disini kamu disarankan untuk melakukan instalasi GIT terlebih dahulu ya. 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 kamu dan tuliskan seperti berikut ini

Silahkan terlebih dulu untuk membuat 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 kamu.

Membuat Path Pada Windows

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

Caranya, kamu 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

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

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 gandrungi oleh para developer, termasuk saya.

( Baca : 7 Text Editor Populer Programmer di Tahun 2018 )

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

kemudian ketikkan nama aplikasi yang akan kita buat

dan.. selesai dengan cepat. tanpa harus berpindah direktori dalam memulai project di flutter. misalkan saya akan membuat project dengan nama nfjuara. maka ahasilnya akan seperti ini

sekarang buka project yang telah kamu buat dalam visual studio code. jika belum tersedian dalam visual code seperti gambar di atas.

klik File pilih open folder seperti di tunjukkan gambar di bawah ini :

Instalasi Android Studio

Android studio merupakan syarat yang wajib yang harus kamu instal 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 studi tadi.

Tinggal ikuti 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 kamu.

kemudian akan menuju jendela android virtual device manajer

klik create virtual device seperti gambar diatas.

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

nah yang ini pilih dan download x86 images klik next. jika belum ada biasanya kamu 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 kamu menggunakan android oreo. klik next untuk melanjutkan langkah nya.

Kemudian muncul pengaturan nama avd dan ukuran setup orientasi layar. di sini saya 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 lo ya tentunya dengan android yang berbeda. kemudian klik tombol play berwarna biru. maka android emulator akan menjadi seperti ini.

gambar di bawah 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.

Mengenal Komponen Project Flutter

Untuk susunan project flutter yang nantinya akan kamu buat akan seperti ini. di mana intinya ada folder android dan ios. serta ada komponen utama yaitu lib yang dalamnya berisi file bawaan fluter yaitu main.dart

Menjalankan Program Flutter

Ketikkan pada CMD kamu, 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.

Pada komputer saya.. 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.

silahkan lihat gambar di bawah ini.

#Kesimpulan

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.

Semoga artikel ini dapat membantu kamu dalam memulai membuat aplikasi mobile. sehingga menghantarkan kamu untuk menjadi developer aplikasi mobile yang tangguh dan berkualitas. dan jangan lupa untuk selalu memperbaharui keilmuan kamu dibidang teknologi, karena jika tidak kamu lakukan, maka sudah menjadi hukum dunia bahwa kamu akan tertinggal dengan teknologi tersebut.

Jangan sungkan untuk bertanya pada kolom komentar jika kamu mengalami kesulitan dalam membuat aplikasi dengan flutter. terimakasih dan semoga artikel ini bermanfaat dan menjadi amal ibadah saya.

About the Author: admin initekno

2 Comments

  1. permisi bang
    boleh tau spesifikasi PC untuk menjalankan flutter ini?
    kan emulatornya make punya android studio tuh
    apakah ramnnya juga minimal 8GB?

    1. Ya… Saya menggunakan laptop dengan prosesor core i3, ram 8 gb. Itupun setelah emulator berhasil berjalan, android studio saya tutup.. Mungkin jika kamu menggunakan ram 4 gb. Bisa diakali dengan menginstal genymotion..

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *