Mengenal Aplikasi Android dengan Flutter (Bagian II)

Bagikan jika Anda sukai postingan ini!

Aplikasi dengan Flutter
Aplikasi dengan Flutter

Pada bagian pertama, kita sudah mencoba membuat contoh aplikasi pertama dengan Flutter. Seperti yang saya sampaikan pada bagian tersebut, saya akan menjelaskan kode sumber dari yang sudah kita buat. Sebelum membahas kode, yang perlu Anda ketahuai dari Flutter adalah bahwa seluruh bagian dari aplikasi merupakan Widget.

Pada kode sumber Anda dapat melihat kata kunci seperti: StatelessWidget, StatefulWidget, MaterialApp, Scaffold, AppBar, Text, Center, Column, RaisedButton, dan sebagainya. Keseleuruhan kata kunci tersebut merupakan kelas-kelas yang membangun aplikasi yang merupakan turunan dari kelas Widget. Setiap kelas turunan Widget tersebut mempunyai argumen-argumen yang bisa ditentukan nilainya. Misalnya, pada kelas AppBar yang mempunyai argumen title, RaisedButton yang mempunyai argumen color, child, onPressed, dan sebagainya. Tidak berbeda dengan tag-tag HTML (seperti: body, div, span, dan sebagainya) yang mempunyai atribut id, name, width, height, dan sebagainya. Yang membedakan adalah kelas-kelas pada Flutter masing-masing mempunyai argumen-argumen yang berbeda satu sama lain, seperti RaisedButton mempunyai argumen color, sementara pada Column tidak tersedia.

Kembali ke kode sumber, tapi sebelumnya saya salin dulu ya kode sumber akhir pada artikel bagian pertama.

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MainActivity(),
  ));
}

class MainActivity extends StatefulWidget {

  @override
  MainPage createState() {
    return MainPage();
  }
}

class MainPage extends State<MainActivity>{
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My First App"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('$counter'),
            RaisedButton(
              color: Colors.blue,
              onPressed: incrementCounter,
              child: Text("Click Me!",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Aplikasi dengan Flutter akan menjalankan pertama kali kode sumber dari sebuah berkas dart yang mempunyai metode main.

void main(){
  //Kode yang akan dijalankan pertama kali
}

Seperti pada contoh berkas main.dart di atas terdapat metode main yang menjalankan metode runApp. Metode runApp ini akan membangun dan menjalankan aplikasi dengan tema MaterialApp. Ada dua tema yang dimiliki oleh Flutter, yaitu MaterialApp dan CupertinoApp. MaterialApp adalah tema atau gaya tampilan aplikasi Android sementara CupertinoApp adalah tema atau gaya tampilan aplikasi iOS. Dengan Flutter, dua tema ini dapat dijalankan baik pada Android maupun iOS.

Kembali ke kode sumber, pada saat pemanggilan MaterialApp, terdapat argumen yang disertakan, yaitu theme. Argumen theme digunakan untuk menentukan tema warna material yang digunakan, yang dirangkum pada kelas ThemeData. Kita bisa lihat pada saat pemanggilan kelas ThemeData terdapat pengaturan nilai argumen primarySwatch pada Colors.blue. Ini menandakan aplikasi kita menggunakan tema material berwarna biru.

Pada MaterialApp terdapat pengaturan argumen home yang bernilai MainActivity(). MainActivity sendiri adalah kelas yang kita buat (baris ke-12) yang merupakan turunan kelas StatefulWidget.

Pada kelas MainActivity terdapat metode createState yang menghasilkan nilai kembali berupa kelas MainPage. MainPage juga merupakan kelas yang sudah kita buat (baris ke-20) yang merupakan turunan dari kelas State. Seperti sudah dijelaskan pada artikel sebelumnya bahwa dengan menggunakan StatefulWidget artinya kita hendak membuat tampilan aplikasi yang dinamis, dan konsekuensinya kita harus menambahkan kelas baru turunan State sebagai media untuk perubahan tampilan aplikasi.

Kelas MainPage adalah kelas yang menentukan hasil akhir tampilan (layout) dari aplikasi. pada kelas ini terdapat metode build yang akan mengembalikan nilai berupa kelas Scaffold. Kelas Scaffold adalah yang menentukan keseluruhan layout dari aplikasi yang kita buat. Pada kelas ini terdapat beberapa argumen seperti appBar yang digunakan untuk menentukan tampilan toolbar atau appbar (batang paling atas) dari aplikasi.

Bagian Toolbar/Appbar Aplikasi
Bagian Toolbar/Appbar Aplikasi

Pada argumen appBar saya menambahkan widget AppBar untuk menampilkan appbar pada aplikasi. Sebenarnya Anda boleh saja tidak menentukan nilai pada argumen appBar ini. Kemudian pada AppBar saya mengisi argumen title dengan widget Text dan menentukan teks yang akan ditampilkan pada appbar yaitu “My First App“.

Pada Scaffold juga terdapat argumen body untuk menentukan tampilan tubuh (body) aplikasi.

Bagian Tubuh/Body Aplikasi
Bagian Tubuh/Body Aplikasi

Pada argumen body saya menambahkan widget Center. Center mempunyai argumen child untuk menentukan widget anak dari Center. Center berguna untuk mengatur perataan widget anak yang dimilikinya ke tengah-tengah. Argumen child dari Center saya isi dengan widget Column. Column berguna untuk menampilkan anak-anak widget yang dimilikinya (yang ditentukan pada argumen children) disusun secara vertikal.

Tampilan Widget Column
Tampilan Widget Column

Pada argument children dari Column saya menambahkan 2 (dua) buah widget anak, yaitu Text, dan RaisedButton. Teks yang akan ditampilkan pada widget Text saya set dengan variabel counter. Pada RaisedButton terdapat argumen onPressed yang saya set nilainya pada metode incrementCounter yang sudah saya buat pada baris ke-23 sampai baris ke-27. Nilai variabel counter akan berubah dipicu oleh argumen onPressed dari RaisedButton ketika RaisedButton ditekan (diklik).

Perhatikan bagian deklarasi/pembuatan metode incrementCounter. Agar nilai baru dari variabel counter dapat tersimpan, pengubahan nilai counter harus di dalam metode bentukan setState yang dimiliki oleh kelas State.

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

Itu saja mungkin yang dapat saya sampaikan pada pembahasan kali ini. Jika ada pertanyaan silakan memanfaatkan kolom komentar. Mohon maaf jika terdapat kalimat yang tidak mudah dipahami, atau masih terdapat penjabaran yang salah, karena kebetulan saya juga baru mempelajari Flutter seminggu yang lalu (saat artikel ini dibuat).