Cara Menginstall Flutter di Windows Menggunakan Android Studio

Flutter dan Android Studio

Di artikel kali ini, kita akan membahas mengenai Flutter, yang di Google I/O 2019 diumumkan telah merilis versi 1.5. Apa itu Flutter? Mengutip dari laman websitenya, Flutter adalah “framework UI baru, untuk aplikasi mobile yang diperkenalkan oleh Google. Flutter membantu para programmer membuat aplikasi native berkualitas tinggi baik untuk iOS dan Android”. Di artikel ini penulis juga akan membahasa cara menginstall Flutter di Windows menggunakan Android Studio.

Penulis sempat mencoba menginstall & membuat aplikasi sederhana menggunakan Flutter, mengikuti tutorial di https://flutter.io/get-started/ . Performa aplikasi yang dibuat dengan Flutter, dirasakan penulis tidak ada bedanya dengan aplikasi yang dibuat menggunakan Java. Pun pembuatannya sama2 menggunakan Android Studio.

Mengapa Flutter menarik untuk diikuti perkembangannya? Ada beberapa alasan, menurut penulis.

  1. Flutter bersifat open source. Bisa diartikan Flutter boleh dipakai secara gratis.
  2. Flutter disupport oleh Google. Google sendiri sudah membuat beberapa app menggunakan Flutter.
  3. Kita bisa membuat aplikasi menggunakan Flutter di Android Studio. Karena Flutter menyediakan plugin untuk Android Studio.
  4. Sekali bikin aplikasi menggunakan Flutter, kita bisa membuat file apk untuk dipasang di Google Playstore dan file ipa untuk dipasang di Apple Appstore. Dari pengalaman penulis membuat aplikasi androidnya, performa dan tampilan aplikasi kelihatan sama dengan yang dibuat menggunakan java.
  5. Flutter menggunakan cara yang berbeda dari framework multiplatform lainnya, yang bisa membantu kita membuat aplikasi dengan tampilan menarik dan performa yang lebih bagus. Detailnya bisa dibaca di salah satu artikel Medium ini.

Sekarang penulis akan mencoba membagikan langkah2 cara menginstall Flutter di Windows. Pertama2, buka laman https://flutter.io/get-started/install/ , lalu pilih OS yang digunakan. Penulis sendiri menggunakan Windows 10, jadi untuk selanjutnya akan diperlihatkan langkah2 untuk Windows. Tapi seharusnya tidak jauh beda dengan Linux dan MacOS.

Kemudian ikuti tutorial di https://flutter.dev/docs/get-started/install/windows . Karena di laptop penulis Android Studio 3.4.2 & Emulator (Genymotion / AVD) sudah siap, maka tinggal menginstall Flutter dari git. Buka command prompt, pergi ke folder yang diinginkan misal C:/flutter, lalu jalankan perintah untuk meng-clone Flutter menggunakan git:

git clone -b stable https://github.com/flutter/flutter.git

Setelah prosesnya selesai, tambahkan path untuk user variables di Control Panel. Buka Desktop komputer, klik ikon Windows di kiri bawah, ketik: env , lalu pilih “Edit environment variables for your account”.  Di path user variables, klik Path, lalu klik tombol Edit, lalu tambahkan baris baru yg isinya: C:\flutter\flutter\bin .

Setelah menambahkan path, tutup semua command prompt. Lalu di folder yang ada clone Flutter jalankan perintah untuk mengecek dan menyelesaikan instalasi Flutter:

flutter doctor

Ini screenshot dari laptop penulis, setelah selesai menjalankan perintah “flutter doctor”.
Hasil flutter doctor

Bagian yang ditandai biru, adalah karena kita belum menginstall plugin Flutter dan Dart di Android Studio. Kita akan menginstall plugin tersebut sebentar lagi. Bagian yang ditandai merah, bisa diabaikan jika kita mau menggunakan Android Studio untuk koding Flutter. Bagian warna kuning, ada peringatan “no devices available”. Ini karena penulis sedang tidak menyalakan emulator apapun. Flutter bisa mengenali emulator Genymotion dan emulator AVD bawaan Android Studio.

Setelah 1 emulator Genymotion dinyalakan, dan di command prompt dijalankan perintah

flutter devices

maka hasilnya seperti ini:

hasil flutter devices

Sampai di sini, Flutter sudah mengenali emulator yang sedang berjalan. Instalasi flutter sudah selesai, dan tidak ada masalah di command line. Selanjutnya mengikuti link https://flutter.dev/docs/get-started/editor, kita perlu menginstall 1 Plugin Flutter di Android Studio. Buka Android Studio 3.4.2, buka menu File>Settings>Plugins . Di bagian atas klik Marketplace untuk mencari plugin di marketplace. Lalu ketik: flutter & pencet Enter di keyboard . Jika ada dialog yang muncul, klik Yes untuk menginstal plugin Dart yang dibutuhkan oleh plugin Flutter.install plugin dart

Tunggu proses downloadnya, lalu klik Restart IDE supaya pluginnya bisa jalan di Android Studio. Kalau ada dialog lagi, klik tombol Restart lagi.

Setelah Android Studio terbuka lagi, tunggu proses gradle di bagian bawah sampai selesai, lalu klik File>New>New Flutter Project. Di sini kita bisa memilih tipe project Flutter yang mau kita buat. Apakah berupa aplikasi, plugin, package, atau modul untuk Flutter. Pilih tipe “Flutter Application”, lalu klik Next.Memilih Flutter Application

Selanjutnya, isi inputan nama aplikasi di “project name”, dan di inputan “Flutter SDK Path”, arahkan ke folder repo dari git di langkah awal2 tadi ketika instalasi Flutter. Di artikel ini, foldernya adalah C:\flutter\flutter. Jangan mengklik “Install SDK”, karena kita sudah menginstall SDK menggunakan git. Kemudian pilih Project location, dan terakhir Anda bisa mengubah Project Description jika Anda mau. Kalau sudah, klik tombol Next.

Konfigurasi project Flutter

 

Berikutnya Anda bisa mengisi company domain. Isi dengan: pintar-android.com . Project ini akan memakai library androidx karena androidx sudah tercentang. Project Flutter bisa mendukung Kotlin untuk app android & Swift untuk app iOS, dengan mencentang sesuai kebutuhan. Klik tombol Finish untuk membuka project di Android Studio.

Nama package Flutter

Setelah proses create project selesai, akan tampil project Flutter, siap kita modifikasi. Yang menarik perhatian bagi penulis adalah struktur projectnya. Dari awal sudah disediakan file main.dart yang berperan seperti MainActivity.java di project Java Android Studio, terletak di folder flutter_app (sesuai nama project), lalu di dalam folder lib. Selain itu sudah ada folder android dan ios yang berisi java & C++ yang mempunyai struktur persis seperti project Java & C++ native. Jangan lupa, kita juga bisa menambahkan kode kotlin & swift di project Flutter.

Tampilan project Flutter di Android Studio

Jika kita mau membuat aplikasi menggunakan Flutter, kita menggunakan bahasa pemrograman Dart. Bahasanya cukup simpel & berorientasi obyek, seharusnya tidak terlalu susah untuk mempelajarinya. Apalagi jika sudah pernah koding dengan bahasa Java atau Swift. Penulis sudah mengikuti tutorial di https://flutter.dev/docs/get-started/codelab , dan penulis sudah menguploadnya ke github untuk dipelajari di https://github.com/meidikawardana/startup_namer .

Terakhir, untuk programmer Android, Flutter memberikan beberapa info tambahan supaya bisa menggunakan Flutter dengan memanfaatkan pengetahuan yang sudah dimiliki ketika koding menggunakan java. Bisa dibaca di link https://flutter.dev/docs/get-started/flutter-for/android-devs .

Demikian artikel pintar-android.com mengenai cara menginstall Flutter di Windows, semoga bermanfaat. Like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman khususnya android.

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

 

Metode Serupa setTimeout Javascript di Android

Artikel kali ini menjelaskan mengenai persamaan metode setTimeout javascript di android, yang bisa dituliskan dengan bahasa Java maupun Kotlin

Untuk teman2 yang pernah koding di Javascript, kemungkinan besar sudah pernah pakai metode setTimeout. Untuk yang belum pernah pakai, metode ini bisa mengatur supaya kodingan yang kita tuliskan, akan jalan di waktu yang kita tetapkan. Misal kita mau supaya kodingan tersebut jalan 5 detik setelah web / aplikasi kita jalan. Maka di Javascript, kita bisa menuliskan perintah seperti ini:

setTimeout( 
 function() {
 console.log("Kodingan ini akan jalan 5 detik setelah script ini mulai jalan");
 },
5000); //dalam satuan milidetik

Nah, bagaimana membuat kodingan serupa di Android? Untuk bahasa Java, kita bisa menuliskan sebagai berikut ini:

new android.os.Handler().postDelayed(
    new Runnable() {
        public void run() {
            Log.i("tag", "Kodingan ini akan jalan 5 detik setelah script ini mulai jalan");
        }
    }, 
300);

Bagaimana jika kita menuliskan dengan bahasa Kotlin? berikut ini kodingannya.

Handler().postDelayed({
    Log.i("tag", "Kodingan ini akan jalan 5 detik setelah script ini mulai jalan");
}, 5000)

Demikianlah kita bisa menuliskan perintah sederhana untuk menjalankan kodingan sesuai waktu yang kita inginkan di android.

Semoga artikel ini berguna. Like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman, khususnya android.

Menjalankan Aplikasi Dari Android Studio ke Hape Lewat Wifi

Tutorial kali ini akan menjelaskan mengenai bagaimana menjalankan aplikasi dari Android Studio ke hape lewat Wifi tanpa mengkoneksikan hape ke laptop pakai kabel USB. Dalam artikel ini kita akan memakai Android Studio 3.0.1, meskipun bisa juga dipakai di Android Studio 2.x.x.  Install dulu pluginnya: https://github.com/pedrovgs/AndroidWiFiADB#installation. Supaya semua yang dijelaskan di artikel ini bisa jalan, laptop dan hape harus terhubung ke jaringan wifi yang sama.



Pertama2, buat dulu project baru di Android Studio, atau kalau sudah pernah membuat project sebelumnya, bisa memakai project yang sudah ada. Kemudian siapkan hape dan nyalakan USB Debugging, dan sambungkan hape tersebut ke laptop pakai kabel USB. Pastikan hape tersebut terdeteksi oleh Android Studio di tab Logcat. Contohnya seperti gambar di bawah ini, penulis memakai hape Xiaomi Redmi 5A.
Pastikan hape terdeteksi di Android Studio

Kemudian di sisi kanan, cari tab Android Wifi ADB. Jika tab tersebut diklik, akan terbuka kotak di kanan seperti gambar berikut ini.klik Android Wifi ADB

Ternyata dia mendeteksi juga hape yang tersambung lewat USB. Klik tombol Connect, untuk menyambungkan hape ke Android Wifi ADB. Setelah itu kolom “state” akan berubah menjadi “connected” dan ada notifikasi muncul di bawah. Lihat gambar di bawah ini untuk lebih jelasnya.Hape terkoneksi ke Android Wifi ADB

Sekarang kita bisa mencabut kabel USB yang menghubungkan hape dengan laptop. Dan di Android Wifi ADB, hape kita tetap terkoneksi! Ini artinya hape sudah terkoneksi dengan Android Studio via Wifi.hape masih terkoneksi meskipun kabel USB sudah dilepas

Sekarang jika kita jalankan project kita yang di Android Studio, maka aplikasinya akan dijalankan langsung ke hape.jalankan aplikasi ke hape yang terkoneksi via wifi

Semoga artikel ini bermanfaat. Like page pintar-android.com di Facebook (https://www.facebook.com/pintarandroid101) untuk mendapatkan notifikasi artikel2 berikutnya. Pasti berguna untuk Anda!

Aplikasi jalan di hape dengan wifi usb

Apakah artikel ini berguna?  tulis di komentar!

Tersedia buku-buku untuk belajar pemrograman Android.

buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ

buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ

buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

kalau sudah beli, bisa dilihat di hape pake app google books, bisa dilihat di browser (misal chrome) di books.google.com -> My Library .

bayarnya bs pake pulsa



Cara Memilih Library / Pustaka Android Untuk Aplikasi Kita

Berikut ini adalah hal-hal yang bisa dipertimbangkan untuk memilih library  (pustaka) untuk aplikasi android yang kita buat.

  1. Siapa yg bikin? lebih baik kalau komunitas yang bikin, daripada hanya 1 orang yg bikin library tersebut. Karena maintenance nya biasanya lebih bagus kalau komunitas yang bikin.
  2. Jumlah issue (problem). Yang mana yg lebih stabil / paling sedikit issue nya? Bisa dilihat di reponya (biasanya github)
  3. Fitur. Library yang mana yang paling cocok fiturnya dengan aplikasi yang kita bikin?
  4. Lisensi mana yang paling oke buat aplikasi kita?
  5. Googling: [nama library][spasi]versus. Buat nyari library2 yg mirip. Siapa tau ada yg mirip & lebih baik.
  6. Dokumentasi. pilih library yang dokumentasinya lebih lengkap supaya lebih mudah dipakai.



Sumber: Udacity – Advanced Android, Library: Choose a Library (untuk poin 1 s/d 5)

 

Tersedia buku-buku untuk belajar pemrograman Android.

buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ

buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ

buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

kalau sudah beli, bisa dilihat di hape pake app google books, bisa dilihat di browser (misal chrome) di books.google.com -> My Library .

bayarnya bs pake pulsa

Cara Melacak Crash / Exception di Android Studio

Artikel ini membahas cara melacak crash di Android Studio 2.x.x, khususnya 2.3.3. Untuk yang sudah memakai Android Studio 3.0.1, bisa membaca versi baru dari artikel ini di https://pintarandroid101.blogspot.co.id/2018/03/cara-melacak-crash-exception-di-android.html

Apa itu crash? Hampir semua programmer android saya kira pernah mengalami crash.

Gambar berikut ini adalah contoh crash / aplikasi berhenti tiba2.

Pada gambar tersebut “Test NullPointer” adalah nama aplikasi android, dan dialog kecil tersebut menginformasikan kalau aplikasi “Tes NullPointer” telah berhenti tiba2.

Mengapa crash seperti ini bisa terjadi? karena telah terjadi exception ketika aplikasi sedang berjalan. Exception adalah error yang fatal yang menyebabkan aplikasi berhenti tiba2. Error yang fatal ini terjadi karena ada kesalahan pada penulisan kodingan di aplikasi. Dan kesalahan penulisan kodingan ini ada banyak sekali macamnya.

Di artikel ini kita akan membahas salah satu kesalahan penulisan kodingan yang akan menyebabkan NullPointerException, yaitu exception yang biasanya terjadi karena ada variabel yang tidak diberi nilai awal (dinisialisasi), tapi sudah dipakai. Di artikel ini kita akan memakai Android Studio 2.3.3.

Untuk menimbulkan NullPointerException, ikuti dulu langkah2 ini.

Langkah 1. Buat project baru di Android Studio

Langkah 2. Masukkan:
Tes NullPointer di “Application name”,
pintar-android.com di “Company domain”,
dan pilih lokasi sembarang di “Project location”.
lalu tekan tombol “Next” warna biru di bawah.

Langkah 3. Di layar berikutnya, cukup tekan tombol “Next”

Langkah 4. klik “Empty Activity” seperti di gambar berikut ini, lalu klik tombol “Next”.

Langkah 5. Di layar berikutnya, klik tombol “Finish”.

Langkah 6. Tunggu sampai loadingnya selesai.

Langkah 7. Klik tab activity_main.xml. ini adalah file yang mengatur tampilan aplikasi. Kemudian klik tab “Text” di bawah, untuk melihat kodingan activity_main.xml.

Langkah 8.

Tambahkan 1 baris sesuai gambar di atas:

android:id="@+id/txtHelloWorld"

Ini adalah property id dari komponen TextView. Kita menambahkan id ini supaya bisa diakses dari file MainActivity.java nantinya.

Langkah 9.

Klik tab MainActivity.java, lalu tambahkan beberapa baris sesuai gambar di atas:

import android.widget.TextView; //untuk mengimpor komponen TextView
TextView txtHelloWorld; //untuk membuat variabel txtHelloWorld
//fungsi ini menampilkan teks menggunakan variabel txtHelloWorld
private void setTeks() {
    txtHelloWorld.setText("Contoh NullPointerException");
}
setTeks(); //untuk menjalankan fungsi setTeks()

Langkah 10. Klik tombol segitiga hijau di bagian atas seperti pada gambar, untuk menjalankan project

Langkah 11. Ketika muncul kotak dialog seperti gambar berikut ini, pilih salah satu emulator. Lalu klik tombol “OK” warna biru di bawah. Jika belum punya emulator, buat emulator lebih dulu dengan mengklik tombol “Create New Virtual Device” seperti pada gambar. Tutorial lengkap untuk membuat emulator bisa dilihat di https://goo.gl/wRgD5T.

Langkah 12. Tunggu sampai di dalam emulator keluar pesan seperti berikut ini.

Cara mengatasi crash

Nah! kita sudah membuat sebuah aplikasi yang crash / berhenti tiba2. Sekarang saya akan jelaskan, bagaimana cara melacak crash seperti ini. Mari kita kembali ke Android Studio, lalu klik di “Android Monitor” seperti di gambar.



Hasilnya akan tampil kotak yang berisi catatan semua proses ketika aplikasi kita sedang berjalan. Atau biasa disebut logcat. biasanya kotaknya kurang lebar. coba tarik ke atas biar lebih lebar. caranya ada di gambar berikut ini.

Pastikan di bagian kanan, tulisannya “Show only selected application”. Lalu scrollnya yang di kanan mentok ke atas.

Setelah itu, kita lihat mulai dari baris pertama yang berwarna merah.

kemudian kita cari penyebab errornya. caranya cari kata2 “Caused by” berwarna merah. kalau di gambar di atas, ada baris tulisannya: Caused by: java.lang.NullPointerException: Attempt to invoke virtual method ‘void android.widget.TextView.setText(java.lang.CharSequence)’ on a null object reference . Ini artinya kita telah salah, memanggil fungsi setText pada variabel yang bernilai null (belum diinisialisasi).

Kemudian untuk mencari di kodingan, di baris mana errornya berasal, kita cari tulisan pertama yang berwarna biru muda. seperti gambar di bawah ini.

Tulisannya adalah: MainActivity.java:20. Artinya, errornya ada di file “MainActivity.java”, baris ke-20. Klik tulisan tersebut untuk melihat, ada apa di MainActivity.java baris ke-20.

Ternyata errornya terjadi ketika kita mengeset tulisan pada variabel txtHelloWorld. Kenapa ini bisa menimbulkan crash?

Kalau kita perhatikan dengan seksama, kita memang sudah membuat variabel txtHelloWorld di baris ke-9. tapi kita belum menginisialisasi (memberi nilai ke variabel tersebut). Bagaimana caranya kita menginisialisasi variabel txtHelloWorld?

Kita bisa menuliskan 1 baris lagi setelah baris setContentView(R.layout.activity_main);

Tuliskan seperti gambar di atas, baris ke-16:

txtHelloWorld = (TextView) findViewById(R.id.txtHelloWorld);

Baris ini artinya kita menginisialisasi (memberi nilai) variabel txtHelloWorld dengan menghubungkannya ke komponen txtHelloWorld di file activity_main.xml.

Setelah itu, kita jalankan lagi projectnya dengan menekan tombol segitiga hijau di Android Studio. Hasilnya aplikasi kita sudah tidak error lagi. Seperti ini.

Yang baru saya jelaskan adalah cara melacak dan membetulkan salah satu dari banyak sekali penyebab crash di aplikasi Android. Penyebab utama NullPointerException adalah penggunaan variabel yang belum dinisialisasi / diberi nilai awal, seperti txtHelloWorld di artikel ini.

Semoga artikel ini berguna. Silahkan tinggalkan komentar di bawah ini jika ada yang kurang jelas.

 

Tautan ke cara mengatasi crash: cara mengatasi crash

 

Tersedia buku-buku untuk belajar pemrograman Android.

buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ

buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ

buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

kalau sudah beli, bisa dilihat di hape pake app google books, bisa dilihat di browser (misal chrome) di books.google.com -> My Library .

bayarnya bs pake pulsa