Mengenal Framework Flutter Untuk Membuat Aplikasi

Dalam pembuatan aplikasi mobile di iOS maupun Android, kita akan dihadapkan dengan banyak pilihan tools yang mempermudah kita untuk membangun aplikasi. Beberapa tools pengembangan mobile apps yang biasa digunakan ialah Native, Hybrid, dan Cross-platform. Tools tersebut digunakan sesuai dengan kebutuhan dan preferensi dari masing-masing mobile app developer. Jika berbicara mengenai tools cross platform, framework yang belakangan ini sedang booming adalah Flutter. Hadir sebagai penantang baru di dunia mobile development, Flutter menawarkan kemudahan dibandingkan teknologi cross platform lainnya. Beberapa perusahaan besar pun seperti Google, Alibaba Group, Tencent, The New York Times dan Grab telah menggunakan Flutter untuk mengembangkan aplikasi mereka. Tertarik belajar Flutter untuk mengembangkan mobile app? Simak dulu penjelasan Flutter berikut ini.

Apa itu Flutter?

Flutter adalah teknologi open-source pengembangan aplikasi mobile, web dan desktop besutan Google yang dirilis pada tahun 2017 dengan menggunakan bahasa pemrograman Dart dan satu basis kode. Flutter sendiri merupakan Software Development Kit (SDK) yaitu sekumpulan tools yang diperlukan oleh seorang programmer atau developer untuk membuat aplikasi lintas platform/multiplatform dengan tampilan UI yang menarik. Dengan menggunakan Flutter, kita hanya perlu belajar satu bahasa pemrograman dan menggunakan 1 code untuk mendapatkan dua aplikasi di platform berbeda sekaligus. Secara teknis, Flutter ada dua yaitu Flutter Framework dan Flutter SDK. Flutter adalah sebuah framework dari bahasa pemrograman Dart yang menyediakan fungsi & elemen UI atau disebut widget di dalam Flutter. Flutter SDK adalah sekumpulan alat yang digunakan untuk mengembangkan atau membangun aplikasi iOS atau Android. Flutter juga memiliki fitur bernama Stateful Hot Reload yang berfungsi agar proses pengembangan aplikasi dapat berjalan lebih cepat dan mudah. Dengan Flutter, code yang kamu buat bisa langsung muncul di virtual machine dan kamu bisa lihat langsung hasil dari perubahan yang kamu lakukan hanya dalam kurun waktu kurang dari 1 detik.

Cara kerja Flutter Android dan Flutter iOS

Normalnya tanpa menggunakan Flutter kita harus menulis kode dengan Java atau Kotlin beserta Android Development Environment dalam membangun aplikasi Android dan menulis kode Swift/Objective C dan menggunakan iOS Development Environment dalam membangun aplikasi iOS. Kode yang ditulis akan dikompilasi dengan mesin C dan C++ dengan menggunakan Android NDK, kerangka kode akan dibentuk dalam kode native yang akan dikompilasi lagi dengan Dart Compiler. Sedangkan pada iOS kode akan dikompilasi dengan LLVM dan mobile app agar dapat berjalan dengan kumpulan instruksi native tanpa interpreter (penerjemah). Saat ini flutter masih menjadi cross platform framework yang tercepat di tahun 2020. Perbaikan dari segi performa dan lainnya juga terus aktif dilakukan oleh google. Sesuai dengan slogan Flutter “write once, run anywhere” yang berarti hanya cukup membuat satu aplikasi dari flutter dan aplikasi tersebut dapat berjalan di banyak platform seperti android, iOS, desktop windows, website, dan lainnya. Sehingga tidak hanya dapat digunakan untuk membuat aplikasi Android dan iOS, tapi juga bisa juga digunakan untuk mengembangkan aplikasi desktop windows (flutter desktop), linux dan website.

Flutter Tutorial

Setelah mengetahui kemudahan membuat mobile app di Flutter, kamu bisa mengikuti tutorial membuat aplikasi sederhana di website Flutter Studio seperti Hello World. Sebelum itu, kamu harus mengetahui bagian-bagian apa saja yang bisa disesuaikan dengan projek yang akan kamu buat, di antaranya:

  • Header: Bagian yang menangani informasi aplikasi, title maupun icon.
  • Body: Bagian yang berisi content aplikasi yang akan dibuat.
  • Footer: Bagian optional yang bisa dicustom misalnya list menu, floating action button, dan lain-lain.

Ketiga bagian tersebut dibungkus dengan Scaffold Class. Scaffold Class inilah yang nantinya akan membentuk struktur tata letak dasar mulai dari header, body sampai footer. Sekarang mari kita mulai menerapkan beberapa code yang bisa diletakan pada masing-masing bagian.

  1. Beri nama project startup_namer (bukan flutter_app).
  2. Ganti konten lib/main.dart dengan menghapus semua kode dari lib/main.dart dan gantilah dengan code di bawah ini pada bagian header:

1

2

3

4

// Header

appBar: AppBar(

  title: Text("Welcome to Flutter"),

),

3. Lalu pada bagian body masukkan code berikut:

1

2

3

4

5

6

7

8

9

10

11

12

// Body

body: Center(

  child: Column(

    mainAxisAlignment: MainAxisAlignment.center,

    crossAxisAlignment: CrossAxisAlignment.center,

    children: <Widget>[

      Text("Hello World",

        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24.0),

      ),

    ],

  ),

),

4. Terakhir pada bagian footer masukkan code berikut:

1

2

3

4

5

// Bottom

floatingActionButton: new FloatingActionButton(

  child: Icon(Icons.add),

  onPressed: () => print("Add"),

),

5. Berikut inilah code selengkapnya:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

import 'package:flutter/material.dart';

 

class App extends StatelessWidget{

 

  @override

 

  Widget build(BuildContext context){

 

    return Scaffold(

// Header

appBar: AppBar(

  title: Text("Welcome to Flutter"),

),

      // Body

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          crossAxisAlignment: CrossAxisAlignment.center,

          children: <Widget>[

            Text("Hello World",

              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24.0),

            ),

          ],

        ),

      ),

      // Bottom

      floatingActionButton: new FloatingActionButton(

        child: Icon(Icons.add),

        onPressed: () => print("Add"),

      ),

    );

  }

}

6. Panggil class App dan simpan pada main.dart

1

home: App(), // class yang akan dijalankan

7. Jalankan aplikasi tersebut. Dan demikianlah tutorial membuat aplikasi pertama “Hello World” menggunakan Flutter. Selamat mencoba.

Semakin banyaknya framework untuk membangun mobile apps menuntut seorang mobile developer untuk bisa menguasai berbagai macam framework. Kamu bisa mempelajari Flutter dengan mengikuti course Mengenal Flutter, Dart Dasar Untuk Flutter, dan Membuat Mobile UI dengan Flutter di platform belajar KODE by Hacktiv8 yang memungkinkan kamu belajar secara fleksibel, di mana saja dan kapan saja hanya dari gadget. Course ini dilengkapi dengan tutorial Flutter yang tentunya dapat mengasah dan upgrade skill kamu untuk menjadi Mobile Developer. Yuk, kuasai framework Flutter dengan belajar di KODE by Hacktiv8.

Share this article: Link copied to clipboard!