Pengenalan Flutter.io Bagi Developer React

Published in

SkyshiDigital

7 min readMay 16, 2018

Flutter adalah SDK untuk pengembangan aplikasi mobile yang dikembangkan oleh Google. Sama seperti react native, framework ini dapat digunakan untuk membuat atau mengembangkan aplikasi mobile yang dapat berjalan pada device iOS dan Android. Dibuat menggunakan bahasa C, C++, Dart and Skia membuat Flutter ini menjadi salah satu framework yang sangat menarik dan worth untuk kita pelajari. Hal yang menarik pada framework ini adalah semua kodenya di compile dalam kode native nya (Android NDK, LLVM, AOT-compiled) tanpa ada intrepeter pada prosesnya sehingga proses compile-nya menjadi lebih cepat. Dari segi penulisan kodenya, Flutter ini sangat berbeda dari react native dan lebih cenderung mendekati Java Android jadi untuk developer react native agak sedikit kesulitan untuk memahami kode pada Flutter ini.

Instalasi

Untuk instalasi pada artikel kali ini saya menggunakan device Mac jadi untuk windows dan Linux dapat mengikuti pada docs Flutter disini.

Download SDK Flutter (pilih yang beta) disini
Kemudian extract SDK yang sudah di download tadi. SDK yang saya download versi 0.3.2-beta
Tambahkan pathflutter di terminal dengan command ini
export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH
Jalankan flutter doctor pada terminal untuk mengecek dependency. flutter doctor akan menampilkan depencency yang diperlukan dan langkah-langkah untuk menambahkan depencency tersebut.

Apabila semua dependency yang diperlukan sudah ada maka sudah dapat membuat project Flutter ini.

Create New Project

Pada artikel kali ini saya menggunakan VS Code untuk membuat aplikasi sederhana menggunakan Flutter. Tambahkan plugin dart pada VS Code terlebih dahulu.

Untuk membuat project baru pada VS Code klik View > Command Pallete dan ketik Flutter pilih new project.

Tuliskan nama project dan tunggu sampai proses nya selesai.

Pada project yang sudah kita buat akan ada folder libuntuk menuliskan kode program kita dalam ekstensi .dartdan file pubspec.yaml untuk menambahkan library. Klik Debug > Start Debugging pada menu VS Code untuk menjalankan kode program kita. Pastikan ada emulator yang sudah berjalan atau device yang sudah pada mode debug yang terhubung. Setelah prosesnya selesai maka akan terlihat tampilan seperti ini pada emulator / device kita.

Pada Flutter ini tersedia fungsi Hot Reload jadi apabila ada kode yang berubah pada emulator / device akan langsung otomatis memuat ulang kode yang baru. Namun apabila tidak otomatis memuat ulang kita dapat mengklik tombol refresh pada VS Code.

Hapus dan gunakan kode ini untuk memulai dari awal dengan hello world agar menjadi lebih mudah untuk membaca kode nya.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

Aplikasi yang berjalan pada emulator/device menjalankan fungsi main() => runApp dan dapat kita lihat pada kode di atas bahwa kita menggunakan kelas MyApp dengan StatelessWidget yang berarti semua properti yang ada pada kelas ini bersifat immutable dan semua nilai value nya bersifat final. Apabila kelas kita digunakan di kelas lain maka kita menggunakan StatefulWidget. Widget build digunakan untuk membuat halaman pada aplikasi dengan MaterialApp untuk style UI nya. Scaffold merupakan code untuk membuat detail / konten rancangan UI nya.

External Package

Seperti yang sudah dijelaskan di atas bahwa untuk menggunakan library / package kita dapat menambahkan nama dan versi library pada file pubspec.yaml . Pada contoh kali ini kita akan mencoba menggunakan paket english_word versi 3.1.0 ke atas untuk meng-generate kata bahasa inggris secara acak.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

Tunggu sampai proses impor nya selesai dan dapat kita gunakan dengan cara import 'package:english_words/english_words.dart'; untuk impor nya dan untuk meng-generate kata secara acak kita gunakan kode berikut:

final wordPair = new WordPair.random();

Ganti ‘Hello World’ dengan wordPair.asPascalCase sehingga code nya menjadi

body: new Center(
          child: new Text(wordPair.asPascalCase),
        ),

Kemudian pada aplikasi kita kata Hello World akan berubah menjadi kata yang acak. Apabila berubah maka penggunakan library eksternal berhasil!

Stateful Widget

Stateful Widget mengatur state yang mungkin terjadi selama widget digunakan (kalau di react mungkin component). Implementasi StatefulWidget memerlukan dua hal yaitu kelas StatefulWidget sendiri dan StateClass. Untuk lebih jelasnya kita langsung coba saja. Tambahkan kode berikut pada file main.dart dibawah kelas MyApp

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

Dan tambahkan kode ini

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

Hapus variable wordPair dan ubah kode pada body kelas MyApp menjadi berikut:

body: new Center(
          child: new RandomWords(),
        ),

Kalau kode yang dituliskan berhasil maka random word akan dibuat dari Stateful Widget yang kita buat tadi.

ListView

Langkah selanjutnya yaitu membuat ListView dari kelas Stateful Widget yang kita buat tadi.

Tambahkan kode variable berikut untuk membuat array dari Wordpair (kata random) dan variabel untuk membuat teks menjadi lebih besar di bagian atas kelas RandomWordsState

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ... // kode yang sebelum nya
}

Tambahkan fungsi untuk ListView builder di bagian bawah kelas RandomWordsState

class RandomWordsState extends State<RandomWords> {
  ... // kode sebelumnya
  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();
        final index = i ~/ 2; 
          // untuk mengecek kata yang masih tersedia        if (index >= _suggestions.length) {
          // kalau masih ada tambahkan ke list          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }
}

Tambahkan kode ini di bawah kode diatas

class RandomWordsState extends State<RandomWords> {
  ... // kode sebelumnya

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

Ubah kode Widget build pada kelas RandomWordsState

class RandomWordsState extends State<RandomWords> {
  ... // kode sebelumnya
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }
  ... // kode setelahnya
}

Terakhir ubah kode Widget build pada kelas MyApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}

Jika kode dituliskan secara benar maka akan tampil list kata seperti dibawah ini:

onClick ListView

Pada artikel kali ini akan diimplementasikan fungsi onClick untuk menyimpan kata. Untuk membuat fungsi ini ikuti langkah berikut

Tambahkan variabel _saved di awal kelas RandomWordsState

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _saved = new Set<WordPair>(); // tambahkan ini

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ... // kode selanjutnya
}

Pada fungsi _buildRow() tambahkan variable alreadySaved di awal fungsi dan Icon pada akhir fungsi

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: new Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
  );
}

Selanjutnya tambahkan onTap (untuk onClick) dibawah trailing dan kodenya menjadi seperti ini:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: new Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
    onTap: () {
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else {
          _saved.add(pair);
        }
      });
    },
  );
}

Jika berhasil maka tampilan app akan seperti ini:

Navigation

Yang terakhir adalah menambahkan navigasi sederhana pada aplikasi yang sudah kita buat tadi. Pada Flutter navigasi ini disebut dengan route dan pada artikel kali ini kita akan membuat routeuntuk halaman kata favorit yang kita klik tadi. Untuk implementasinya bisa ikuti langkah-langkah berikut

Tambahkan tombol icon di appBar dibawah title pada kelas RandomWordsState

class RandomWordsState extends State<RandomWords> {
  ... // kode sebelumnya
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), // tambahkan ini
        ],
      ),
      body: _buildSuggestions(),
    );
  }
  ... // kode setelahnya
}

Tambahkan fungsi _pushSaved() pada kelas RandomWordsState

class RandomWordsState extends State<RandomWords> {
  ...
  void _pushSaved() {
  Navigator.of(context).push(
    new MaterialPageRoute(
      builder: (context) {
        final tiles = _saved.map(
          (pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
          .toList();

        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Saved Suggestions'),
          ),
          body: new ListView(children: divided),
        );
      },
    ),
  );
 }
}