Keren! ini Fitur Baru di Flutter 1.0 yang akan Memudahkanmu Membuat Aplikasi
Tadi malam (4 Desember 2018 pukul 00:00 s/d 03:00 WITA) kita telah menyaksikan Flutter Live yang disiarkan langsung melalui Live Stream dari London.
Pada acara ini, diumumkan beberapa hal penting tentang masa depan Flutter dan rilis Flutter versi 1.0 (stable).
Ini menjadi rilis pertama untuk versi stabil.
Sepuluh bulan yang lalu, Flutter versi beta dirilis dan sudah banyak yang menggunakannya pada aplikasi production.
Ribuan aplikasi yang dibuat dengan flutter sudah tersedia di Google Play dan App Store Apple. Seperti: Alibaba, Google AdWord, Hamilton, dll.
Lalu, apa saja yang baru di Flutter versi 1.0 ini?
Mari kita simak…
Bagaimana Cara Upgrade Flutter?
Sebelum kita membahas apa saja yang terbaru di Flutter 1.0…
…ada baiknya kita upgrade dulu.
Buat kamu yang belum install Flutter, silahkan install dengan mengikuti: “Tutorial Instal Flutter”
Untuk kamu yang sudah menginstal Flutter di komputernya, silahkan ketik perintah berikut untuk upgrade:
flutter upgrade
Apabila masih dalam versi beta
, berarati kamu saat ini
sedang menggunakan channel beta.
O ya, perlu diketahui:
Flutter itu memiliki empat channel untuk rilis:
stable
dev
beta
master
Untuk melihat channel mana yang sedang digunakan, coba ketik perintah:
flutter channel
Maka akan muncul seperti ini:
Untuk mengubah channel ke stable
, ketik perintah berikut:
flutter channel stable
Maka akan menjadi seperti ini:
Setelah itu, baru kita bisa melakukan upgrade ke versi stable dengan perintah:
flutter upgrade
Setelah selesai, akan tampil seperti ini:
Sekarang kita sudah menginstall Flutter 1.0, selanjutnya mari kita lihat apa saja yang baru di versi ini.
1. Add to App
Add to App adalah fitur yang memungkinkan kita menambahkan aplikasi Flutter ke dalam aplikasi android maupun iOS yang sudah ada.
Jadi, modelnya seperti webview. Kita tinggal tanam aplikasi Flutter di dalam aplikasi native yang sudah ada.
Keuntungannya, saat kita bekerja di dalam tim dengan teknologi yang berbeda.
Misalnya, kita punya aplikasi android native. Terus kita ingin menambahkan fitur baru.
Fitur baru tersebut direncanakan ditulis dengan Flutter.
Ini sangat mungkin dilakukan dengan fitur Add to App.
Sebagai percobaan, saya akan membuat sebuah project Android baru dengan Kotlin. Nanti di dalam aplikasi ini, kita akan menambahkan Aplikasi Flutter di dalamnya.
Oh iya, untuk menggunakan Add to app, kita harus menggunakan Android SDK level 16 ke atas. Di bawah itu, dia tidak bisa.
Setelah project dibuat, langkah selanjutnya adalah membuat modul flutter baru di dalamnya.
Caranya, buka terminal lalu ketik perintah berikut:
flutter create -t module my_flutter
Hasilnya:
Sebuah direktori baru bernama my_flutter
akan dibuat.
Folder ini berisi kode project dari Flutter.
Langkah berikutnya, kita harus masuk ke folder tersebut melalui terminal
dan mengeksekusi gradlew
untuk menyiapkan project Flutter.
Ketik perintah berikut:
cd my_flutter
./gradlew flutter:assembleDebug
Perintah ini akan men-download beberapa dependency yang dibutuhkan.
Karena itu, pastikan komputermu terhubung dengan internet.
Setelah itu, tambahkan kode berikut di dalam file settings.gradle
.
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.path,
'my_flutter/.android/include_flutter.groovy'
))
Selanjutnya tambahkan flutter ke dalam dependencies agar aplikasi flutter dapat dipanggil melalui aplikasi native.
Buka file app/build.gradle
, lalu pada bagian dependencies
tambahkan
kode berikut ini:
implementation project(':flutter')
Lalu lakukan sync…
Tunggu sampai prosesnya selesai.
Berikutnya, kita bisa mulai menulis kode.
Pertama, kita buat dulu layoutnya.
Kode XML-nya:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_centerHorizontal="true"
android:id="@+id/frame_layout">
</FrameLayout>
<Button
android:layout_below="@id/frame_layout"
android:text="Open Flutter App"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_flutter"/>
</RelativeLayout>
Berikutnya, pada MainActivity.kt
kita tinggal buat
kode pada onCreate
seperti berikut ini.
package com.petanikode.flutteraddtoapp
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import io.flutter.facade.Flutter
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btn_flutter.setOnClickListener {
val flutterView = Flutter.createView(
this@MainActivity,
lifecycle,
"route1"
)
addContentView(flutterView, frame_layout.layoutParams)
}
}
}
Saat tombol btn_flutter
diklik, maka kita akan membuka aplikasi
Flutter ke dalam frame_layout
.
Hasilnya:
Keren…
Aplikasi Flutter di dalam aplikasi Native.
Eh iya, kita juga bisa membuat fragment (FlutterFragment
)
yang memiliki lifecycle tersendiri.
Mau coba?
Silahkan cek di wiki: https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
2. Platfom Views
Berikutnya, pada versi 1.0 ini…
Flutter hadir dengan Platform Views.
Apa itu?
Platform Views adalah sebuah widget (AndroidVeiw
dan UiKitView
)
yang memungkinkan kita membuat tampilan untuk tiap platform.
Selain itu, ditambahkan juga plug-in seperti Google Maps dan WebView
.
3. Flutter Beyond Mobile
Flutter tidak hanya untuk mobile saja…
Pada rilis Flutter 1.0, diperkenalkan project Hummingbird yang memungkinkan kita untuk menggunakan Flutter di luar aplikasi Mobile seperti di Desktop dan Web. 1
Keren bukan…
Flutter nanti akan bisa digunakan untuk membuat aplikasi web, dekstop, dan Raspberry Pi.
Demo Flutter di Web:
Demo Flutter di Raspberry Pi: 2
Namun…
Project Hummingbird masih dalam eksperimental.
Menurut info yang saya dapatkan dari blog Developer Google1, Hummingbird akan dibahas lagi nanti di acara Google I/O 2019.
Kita tunggu saja ya.
Apakah nanti akan bisa menggantikan beberapa pemain yang sudah ada seperti Electron, Swing, Qt, GTK, dan framework UI lainnya.
Tools Tambahan
Oke ini bukan bagian dari Flutter, tapi ini juga dibahas di dalam Flutter Live.
Ada dua tools menarik untuk kita bahas:
- Flare untuk membuat animasi 2D;
- dan Square plugin untuk pembayaran (payment) di dalam Flutter.
Mari kita coba bahas sedikit.
Salah satu hal yang ditonjolkan dalam acara Flutter Live ialah kemampuan Flutter untuk membuat animasi yang mulus sampai 60fps.
Tentu, nanti kita akan butuh tool untuk membuat animasinya.
Flare adalah aplikasi untuk membuat animasi 2D dari 2Dimensions. Hasil animasi dari Flare, nantinya dapat digunakan pada aplikasi Flutter.
Kemudian yang kedua adalah Square.
Square sebenarnya adalah sebuah perusahaan yang memiliki beberapa produk. Salah satu produknya adalah Payment Gateway dan plug-in-nya tersedia di Flutter.
Mungkin nanti saat kita membuat aplikasi yang membutuhkan transaksi pembayaran, kita bisa pakai plug-in ini.
Akhir Kata…
Nah itu dia sedikit review tentang fitur terbaru di Flutter 1.0.
Oh iya, ada fakta menarik yang saya dapatkan saat menonton Flutter Live:
Ternyata pengguna Flutter atau developer yang menggunakan Flutter terbanyak, berasal dari tiongkok.
Mungkin ini karena Flutter dipakai sama Alibaba, jadi yah banyak programmer Flutter di sana.
Bagaimana dengan Indonesia?
Tertarik untuk mencobanya?
dan bagaimana pendapatmu tentan Flutter 1.0?