Mengenal Google Flutter Untuk Pemula – Flutter dengan cepat menjadi salah satu kerangka kerja paling populer untuk mengembangkan aplikasi seluler lintas platform. Sebagian besar pengembang Android dan iOS saat ini mulai setuju bahwa ini adalah alternatif yang lebih cepat dan lebih tahan masa depan untuk kerangka kerja lintas platform lainnya seperti React Native dan NativeScript.

Google sendiri tidak meninggalkan kebutuhan bisnis yang terlewat untuk menarik lebih banyak pengembang ke sana. Misalnya, Google I/O tahun ini mengadakan beberapa sesi mendalam yang berfokus pada pengembangan aplikasi yang sesuai dengan Desain Material dengannya. Selama salah satu sesi, Google juga mengumumkan bahwa Flutter akan menjadi platform kelas satu untuk Desain Material.

Dalam rangkaian tutorial ini, saya akan membantu Anda menguasai dasar-dasar mengembangkan aplikasi Android dengan Flutter. Dalam tutorial ini, yang memulai seri ini, saya akan fokus pada widget Flutter, blok pembangun semua aplikasi Flutter.

Membangun Aplikasi Dengan Widget Google Flutter

Prasyarat :

Untuk memaksimalkan seri ini, Anda memerlukan:

• versi terbaru dari Android Studio

• perangkat atau emulator yang menjalankan Android API level 21 atau lebih tinggi

1. Configuring Android Studio

Setelah menginstal beberapa plugin ringan, Anda dapat menggunakan Android Studio, pengembang aplikasi Android asli IDE yang paling terbiasa, untuk mengembangkan aplikasi Flutter.

Mulailah dengan meluncurkan Android Studio dan memilih opsi Configure > Plugins di layar selamat datang.

Pada dialog yang muncul, tekan tombol Browse Repositories dan cari plugin Flutter.

Setelah Anda menemukan plugin, tekan tombol Install. Pada titik ini, Anda akan ditanya apakah Anda ingin menginstal plugin Dart juga. Tekan Yes untuk melanjutkan.

2. Membuat New Project

Setelah restart, Anda akan dapat melihat tombol Mulai proyek Flutter baru di layar selamat datang Android Studio. Tekan untuk mulai membuat proyek Flutter pertama Anda.

Pada layar berikutnya, pilih opsi Flutter Application dan tekan Next.

Sekarang Anda akan melihat formulir yang menanyakan berbagai detail tentang aplikasi Flutter Anda, seperti nama dan lokasinya. Pastikan Anda mengetikkan nilai yang valid di semua fields.

Plugin Flutter tidak disertakan dengan Flutter SDK. Oleh karena itu, Anda harus menginstal SDK secara terpisah. Anda dapat melakukannya dengan menekan tombol Instal SDK sekarang.

Bergantung pada seberapa cepat koneksi Internet Anda, penginstalan mungkin memerlukan waktu yang cukup lama untuk diselesaikan. Setelah berhasil, Anda dapat menekan tombol Berikutnya untuk menyelesaikan penyiapan proyek.

Mengenal Google Flutter Untuk Pemula

3. Menambah sebuah Entry Point

Sepanjang tutorial ini, Anda akan menulis kode di dalam file lib/main.dart. Ini akan, secara default, berisi beberapa kode contoh, yang tidak akan Anda perlukan. Jadi hapus semua isinya sebelum melanjutkan.

Kerangka kerja Flutter menggunakan bahasa pemrograman Dart, bahasa yang mudah dipelajari yang sintaksisnya sangat mirip dengan Java dan C. Akibatnya, seperti kebanyakan program Java dan C yang berdiri sendiri, aplikasi Flutter juga membutuhkan fungsi main(), fungsi khusus yang berfungsi sebagai titik masuk ke aplikasi.

Dengan demikian, tambahkan kode berikut ke file main.dart:

void main() {
    // TO DO
}

Pada titik ini, Anda dapat menekan Shift-F10 untuk membangun dan menjalankan aplikasi. Jika Anda tidak menemukan kesalahan pada langkah sebelumnya, Anda akan melihat aplikasi menampilkan kanvas putih kosong di perangkat Anda.

4.Menggunakan Stateless Widgets

Semua aplikasi Flutter terdiri dari satu atau beberapa widget, instance kelas yang memungkinkan Anda menggambar teks dan gambar di layar. Biasanya, Anda tidak perlu memprogram widget tingkat rendah apa pun dari awal karena kerangka kerja ini dilengkapi dengan berbagai widget cantik yang telah dibuat sebelumnya yang mematuhi bahasa desain platform Android dan iOS.

Agar dapat menggunakan widget dasar di aplikasi Anda, impor pustaka widget dengan menambahkan kode berikut di awal file main.dart:

import 'package:flutter/widgets.dart';

Widget paling sederhana yang dapat Anda buat adalah widget stateless. Seperti yang Anda duga, mereka tidak memiliki status yang terkait dengannya dan karenanya statis. Mereka ideal untuk menampilkan label, judul, dan elemen UI lainnya yang isinya tidak mungkin berubah saat aplikasi sedang berjalan. Untuk membuat widget stateless, Anda harus memperluas kelas StatelessWidget dan mengganti metode build()-nya. Kode contoh berikut menunjukkan caranya:

class MyFirstWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // More code here
  }
}

Seperti yang Anda lihat pada kode di atas, metode build() harus mengembalikan objek Widget. Anda bebas memilih dan mengembalikan salah satu dari lusinan widget siap pakai yang ditawarkan Flutter. Misalnya, jika Anda ingin menampilkan sebaris teks, Anda dapat membuat dan mengembalikan widget Teks seperti yang ditunjukkan di bawah ini:

return Text("This is nice!",
        textDirection: TextDirection.ltr);

Perhatikan bahwa Anda harus selalu ingat untuk menentukan arah teks Anda saat menggunakan widget Teks.

Namun, jika Anda langsung menjalankan aplikasi, Anda tidak akan dapat melihat teksnya. Itu karena Anda masih belum membuat instance widget stateless Anda. Jadi, buka metode main(), buat instance widget di dalamnya, dan teruskan ke metode runApp(). Berikut caranya:

runApp(new MyFirstWidget());

Saat Anda menambahkan kode di atas dan menyimpan proyek Anda, Android Studio akan secara otomatis memuat ulang aplikasi di perangkat Anda, memungkinkan Anda untuk melihat teksnya.

Jika Anda ingin menampilkan gambar alih-alih teks, Anda cukup mengganti widget Teks dengan widget Gambar di dalam metode build() kelas Anda. Kode berikut menunjukkan cara membuat widget Gambar yang mengunduh dan menampilkan gambar jarak jauh:

return Image.network(
    "https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");

Saat menyimpan proyek Anda lagi, Anda akan melihat sesuatu seperti ini di perangkat Anda:

5. membuat Widget Trees

Semua aplikasi Flutter dapat dianggap sebagai pohon widget. Aplikasi yang Anda buat di langkah sebelumnya adalah pohon widget hanya dengan satu widget. Namun, menggunakan widget Teks atau Gambar sebagai elemen teratas dari pohon widget bukanlah ide yang baik karena Anda tidak akan dapat menambahkan widget anak apa pun ke dalamnya.

Flutter menawarkan beberapa widget yang dapat bertindak sebagai wadah untuk widget lain. Yang paling umum digunakan adalah widget Baris dan Kolom. Seperti namanya, widget Baris memungkinkan Anda menempatkan beberapa widget di samping satu sama lain, dan widget Kolom membantu Anda memposisikan widget satu di bawah yang lain. Mereka sangat diperlukan saat membuat pohon widget yang lebih dalam.

Kode berikut menunjukkan cara menggunakan widget Kolom untuk membuat pohon widget yang memiliki dua anak: widget Teks dan widget Gambar.

Text myText = Text("This is a nice photo!",
    textDirection: TextDirection.ltr);
 
Image myImage = Image.network(
    "https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");
 
return Column(
  children: <Widget>[myText, myImage]
);

Aplikasi sekarang akan terlihat seperti ini:

Selain itu, ada widget yang membantu Anda memposisikan satu widget dengan lebih baik. Misalnya, widget Tengah membantu Anda memusatkan widget. Demikian pula, widget Container memungkinkan Anda menambahkan padding dan margin ke widget Anda.

Kode berikut menunjukkan cara memusatkan widget Kolom yang baru saja Anda buat dengan menyematkannya di dalam widget Pusat:

return Center(child: Column(
    children: <Widget>[myText, myImage],
    mainAxisSize: MainAxisSize.min
  )
);

Dalam kode di atas, perhatikan bahwa widget Kolom menggunakan properti tambahan yang disebut mainAxisSize, yang nilainya disetel ke min. Itu perlu karena, sebelum memusatkan kolom, Anda harus membuat tingginya sama dengan jumlah tinggi semua anak-anaknya. Tanpa properti, widget Kolom akan sebesar layar perangkat, dan widget Tengah tidak akan berpengaruh padanya.

6. Menggunakan Material Design Widgets

Selama ini, Anda telah menggunakan widget dasar yang merupakan bagian dari perpustakaan widget. Flutter memiliki pustaka alternatif yang disebut material, yang menawarkan widget Desain Material. Untuk menggunakannya di aplikasi Anda, ganti pernyataan yang mengimpor pustaka widget dengan yang berikut:

import 'package:flutter/material.dart';

Selanjutnya, untuk menerapkan gaya Desain Material ke widget Anda, Anda harus memiliki widget MaterialApp di bagian atas pohon widget Anda. Anda juga harus menyematkan semua widget yang Anda buat sebelumnya di dalam widget Scaffold, yang dapat berfungsi sebagai layar beranda widget MaterialApp.

Selain itu, karena sebagian besar aplikasi Desain Material memiliki bilah aplikasi, Anda dapat secara opsional menyetel properti appBar widget Scaffold ke widget AppBar baru.

Kode berikut menunjukkan kepada Anda bagaimana melakukan semua itu secara ringkas:

return MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("My App")),
        body: Center(
          child: Column(
            children: <Widget>[myText, myImage],
            mainAxisSize: MainAxisSize.min
          ),
        )
    )
);

Aplikasi ini akan terlihat jauh lebih baik sekarang.

7. menggunakan Stateful Widgets

Widget stateless tidak dapat diubah. Dengan kode yang Anda tulis di langkah sebelumnya, tidak ada cara mudah untuk mengubah konten widget Teks atau widget Gambar. Mengapa? Karena framework Flutter lebih memilih pemrograman reaktif daripada pemrograman imperatif. Akibatnya, sebagian besar widgetnya tidak memiliki metode penyetel yang dapat memperbarui kontennya saat runtime. Misalnya, widget Teks tidak memiliki metode setText() yang memungkinkan Anda mengubah teks yang ditampilkannya.

Widget stateful, di sisi lain, bisa berubah, meskipun tidak secara langsung. Mereka bergantung pada objek Negara untuk memutuskan apa yang harus mereka tampilkan pada saat tertentu. Dengan demikian, setiap kali objek State berubah, framework akan secara otomatis memperbarui konten widget stateful yang terhubung dengannya.

Untuk membuat widget stateful, Anda harus memperluas kelas StatefulWidget dan mengganti metode createState().

class MySecondWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TO DO
  }
}

Selanjutnya, Anda harus membuat kelas Status kustom baru yang berisi variabel yang membentuk status widget stateful. Selain itu, di dalam kelas, Anda harus mengganti metode build() untuk mengembalikan pohon widget Anda.

Kode berikut menunjukkan cara membuat kelas State yang berisi satu variabel bernama url:

class MyState extends State<MySecondWidget> {
 
  String url = "https://source.unsplash.com/random/800x600";
              // A random image from Unsplash
 
  @override
  Widget build(BuildContext context) {
    // More code here
  }
}

Demi contoh konkret, sekarang mari kita buat pohon widget Desain Material yang berisi widget Gambar, yang menampilkan gambar acak, dan widget RaisedButton, yang dapat ditekan pengguna untuk memuat gambar acak baru. Kode berikut menunjukkan caranya:

return MaterialApp(
  home: Scaffold(
    body: Center(
      child:Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          RaisedButton(
            child: Text("Press Me"),
            onPressed: changeURL,
          ),
          Image.network(url)
        ]
      )
    )
  )
);

Perhatikan bahwa konstruktor widget Gambar sekarang mengambil variabel url sebagai inputnya, bukan literal string. Ini memungkinkan kerangka kerja untuk menggunakan nilai variabel terbaru setiap kali widget Gambar digambar.

Perhatikan juga bahwa widget RaisedButton memiliki atribut onPressed yang menunjuk ke event listener bernama changeURL(). Metodenya belum ada, jadi buatlah.

void changeURL() {
    // More code here
}

Di dalam metode, Anda tentu saja harus mengubah nilai variabel url. Namun, Anda tidak harus mengubahnya secara langsung. Jika Anda melakukannya, framework Flutter tidak akan diberi tahu tentang perubahan tersebut. Untuk memperbarui status widget stateful dengan benar, Anda harus selalu membuat semua perubahan di dalam metode setState().

Untuk saat ini, untuk menampilkan gambar acak, saya sarankan Anda menggunakan layanan Unsplash Source. Yang perlu Anda lakukan untuk mengunduh gambar acak darinya adalah membuat permintaan HTTP ke URL-nya dan meneruskan string kueri unik ke sana.

Kode berikut menunjukkan cara melakukannya menggunakan stempel waktu untuk membuat string kueri unik:

setState(() {
  url = "https://source.unsplash.com/random/800x600/?" +
      "q=${new DateTime.now().millisecondsSinceEpoch}";
});

Pada titik ini, kelas Status kustom Anda sudah siap. Yang perlu Anda lakukan selanjutnya adalah membuat instance dan mengembalikannya dari metode createState() dari widget stateful Anda.

return MyState();

If you pass an instance of your stateful widget to the runApp() method, reload the app, and press the button a few times, you should see it display a new photo every time.

Kesimpulan

Mengenal Google Flutter Untuk Pemula – Anda sekarang tahu cara bekerja dengan widget stateless dan stateful di aplikasi Flutter Anda. Anda juga belajar bagaimana menerapkan tema Desain Material ke dalamnya, mengubah kontennya secara dinamis, dan membuatnya interaktif.

Perlu dicatat bahwa Flutter tidak menggunakan widget asli platform seluler apa pun. Itu menarik semua widget itu sendiri, menggunakan mesin grafis 2D berkinerja tinggi yang disebut Skia, yang menggunakan GPU secara ekstensif. Akibatnya, aplikasi Flutter sering berjalan mendekati 60 fps dan terasa sangat lancar dan responsif.

Untuk mempelajari lebih lanjut tentang widget di Flutter, lihat dokumentasi resmi.

Jika anda berminat untuk pembuatan aplikasi web silahkan hubungi WA 0878-2317-9122 atau klik tombol WA di bawah website ini.

Terimakasih telah membaca Artikel Mengenal Google Flutter Untuk Pemula ini semoga bermanfaat.