Belajar Cara Membuat Program Sederhana dengan Flutter

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada kesempatan ini, saya akan melanjutkan tutorial dasar mengenai penggunaan Flutter SDK dalam pengembangan aplikasi Mobile, sebelumnya kita sudah membahas mengenai Cara Installasi Flutter pada system operasi Windows. Selanjutnya kita akan belajar cara membuat program sederhana dengan Flutter, seperti membuat class, membuat layout, manampilkan Teks, mengatur warna, style dll.

Flutter dapat kita operasikan menggunakan Bahasa pemrograman Dart, jadi jika kalian sudah familiar dengan Bahasa OOP seperti Java atau C++, pastinya lebih mudah untuk mempelajarinya serta kelebihan lainnya yaitu fitur hot reload, yang dapat membuild project hanya dalam bebrapa detik saja.

Flutter mempunyai Widget siap pakai yang langsung dapat kita gunakan untuk merancang User Interface, Widget tersebut turunan dari class Material App, class ini menyediakan widget siap pakai yang modern dan dapat kita edit dan atur sesuka hati.

Belajar Membuat Program Sederhana dengan Flutter

1) Pertama Install Flutter SDKnya pada Sistem Operasi kalian, tutorialnya sudah saya bahas di postingan sebelumnya.

2) Buka Visual Studio Code, untuk membuat project baru, klik menu View > Command Pallete, lalu ketik Flutter, maka akan muncul menu Flutter: New Project.

3) Berinama project tersebut serta tentukan lokasi dimana kalian ingin menyimpannya.

Nama pada project flutter harus menggunakan huruf kecil dan tidak boleh menggunakan spasi (ganti dengan underscore). Dan saat project flutter dibuat, pastikan koneksi internet kalian aktif, karena secara otomatis akan mendownload package dari Flutter.

4) Secara default class main.dart akan dibuat dan terdapat source code yang langsung dapat kalian gunakan, tapi disini kita akan membuat programmnya dari awal, untuk itu hapus semua source code tersebut.

5) Untuk contoh program pertama, kita akan coba manampilkan teks Hello World, kode programmnya seperti berikut ini.

//Import Package yang diperlukan
import 'package:flutter/material.dart';

//Method utama untuk menjalankan program
void main() => runApp(new MainActivity());

//Class utama
class MainActivity extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Belajar Flutter',
      home: new Scaffold(
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

Tekan Crtl+F5 untuk menjalankan project tersebut, kalian dapat menggunakan Emulator atau langsung menggunakan ponsel Android, yang terhubung dengan USB. Setelah aplikasi tersebut berjalan, kalian dapat menggunakan fitur hot reload, untuk mereload aplikasi dengan cepat jika ada perubahan, caranya dengan menekan tombol pada gambar dibawah ini atau tekan Crtl+Shift+F5. .

Penjelasan:

Pertama kita mengimport package yang dibutuhkan, yaitu class material.dart dari Flutter, setelah itu kita buat method main() yaitu method utama kita untuk menjalankan program, didalamnya method tersebut kita tambahkan fungsi runApp() untuk menjalankan class MainActivity. Simbol (=>) digunakan jika statemetn didalam method tersebut hanya satu baris.

Selanjutnya buat class MainActivity yang mengextends class StatelessWidget, class tersebut digunakan sebagai widget dan semua fungsi atau statement didalamnya adalah widget, untuk membuat widget tersebut, kita mewarisi fungsi Widget build() dari class StatelessWidget.

Dialam method tersebut, kita mengembalikan class dari MaterialApp() class ini menyediakan banyak sekali widget siap pakai dan dapat digunakan untuk memberi judul serta membuat Activity.

Scaffold mempunyai peranan seperti activity, didalamnya dapat menembahkan beberapa widget untuk ditampilkan pada layar, widget Scaffold tersebut kita set sebagai home, agar muncul pertama kali saat aplikasi dibuka.

Didalam Scaffold tersebut kita tambahkan body, untuk mengisi konten atau widget didalam layout activity, disana kita menambahkan widget Text yang merupakan turunan dari widget Center, agar widget tersebut muncul tepat ditengah layar.

Selain itu juga, kita dapat menambahkan Style pada Text tersebut, seperti warna, ukuran, FontWeight, FontStyle.

//Import Package yang diperlukan
import 'package:flutter/material.dart';

//Method utama untuk menjalankan program
void main() => runApp(new MainActivity());

//Class utama
class MainActivity extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Belajar Flutter',
      home: new Scaffold(
        body: new Center(
          child: new Text('Hello World',
              style: new TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                  color: Colors.red[900])),
        ),
      ),
    );
  }
}

Angka 900 pada color tersebut digunakan untuk menentukan ketebalan warna. Selanjutnya coba reload project tersebut dengan menekan Crtl+Shift+F5.

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :