author Ahmad Muhardian

Keren! ini Fitur Baru di Flutter 1.0 yang akan Memudahkanmu Membuat Aplikasi


Flutter 1

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:

  1. stable
  2. dev
  3. beta
  4. master

Untuk melihat channel mana yang sedang digunakan, coba ketik perintah:

flutter channel

Maka akan muncul seperti ini:

Flutter Channel

Untuk mengubah channel ke stable, ketik perintah berikut:

flutter channel stable

Maka akan menjadi seperti ini:

Flutter channel

Setelah itu, baru kita bisa melakukan upgrade ke versi stable dengan perintah:

flutter upgrade

Setelah selesai, akan tampil seperti ini:

Upgrade versi Flutter

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.

Add to app

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.

Project Android Baru

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

Membuat modul Flutter

Hasilnya:

Sebuah direktori baru bernama my_flutter akan dibuat. Folder ini berisi kode project dari Flutter.

Folder My 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.

Download Dependency

Karena itu, pastikan komputermu terhubung dengan internet.

Perintah gradlew

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'
))

Setting gradle

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')

Implementation Flutter

Lalu lakukan sync

Sync Aplikasi

Tunggu sampai prosesnya selesai.

Sync Aplikasi

Berikutnya, kita bisa mulai menulis kode.

Pertama, kita buat dulu layoutnya.

Layout aplikasi android

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:

Aplikasi Flutter di dalam aplikasi Native

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.

Platform View Flutter

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

Hummingbird

Keren bukan…

Flutter nanti akan bisa digunakan untuk membuat aplikasi web, dekstop, dan Raspberry Pi.

Demo Flutter di Web:

Aplikasi Web dengan Flutter

Demo Flutter di Raspberry Pi: 2

Aplikasi Respberry Pi dengan Flutter

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:

  1. Flare untuk membuat animasi 2D;
  2. 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.

Aplikasi Flare

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.

Aplikasi Square untuk pembayaran

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?