Penggunaan Flutter Pada Pembuatan Aplikasi Berbasis Mobile

Pada pembuatan aplikasi berbasis mobile, beberapa platform dapat digunakan untuk mengembangkan aplikasi mobile. Sebagai bagian dari pengembangan pembelajaran yang inovatif, digunakan platform yang saat ini banyak digunakan oleh developer.

Aplikasi mobile (Mobile Apps) yaitu aplikasi yang dibuat untuk perangkat-perangkat bergerak (Mobile) seperti : Smartphone, SmartWatch, Tablet, dan lainnya. Perangkat lunak atau disebut juga software aplikasi merupakan hasil dari pemrograman mobile yang dirancang menggunakan bahasa pemrograman tertentu.

Flutter adalah platform yang digunakan para developer untuk membuat aplikasi multiplatform hanya dengan satu basis coding (codebase). Artinya, aplikasi yang dihasilkan dapat dipakai di berbagai platform, baik mobile Android, iOS, web, maupun desktop. 

Flutter memiliki dua komponen penting, yaitu, Software Development Kit (SDK) dan juga framework user interface. 

• Software Development Kit (SDK) merupakan sekumpulan tools yang berfungsi untuk membuat aplikasi supaya bisa dijalankan di berbagai platform. 
• Framework UI merupakan komponen UI, seperti teks, tombol, navigasi, dan lainnya, yang dapat Anda kustomisasi sesuai kebutuhan.

Bagian-bagian dalam membuat aplikasi mobile dengan flutter :

• 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: [

      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: [

            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.