Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Google Flutter dari awal: Membangun Apps dengan widget

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Google Flutter From Scratch.
Google Flutter From Scratch: Grids, Lists, and Data Sources

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

Flutter menjadi salah sat framework paling populer untuk mengembangkan cross-platform aplikasi mobile. Sebagian besar pengembang Android dan iOS  mulai setuju bahwa Flutter lebih cepat dan lebih baik di masa depan untuk Framework Cross-Platrform lainnya seperti React Native dan NativeScript.

Google sendiri membuat acara agar developer lebih tertarik. Misalnya, Google i/o tahun ini memiliki beberapa sesi mendalam yang berfokus pada pengembangan Material Design aplikasi dengan Flutter. Dalam salah satu sesi, Google juga mengumumkan bahwa Flutter akan menjadi first-class platform untuk Material Design.

Dalam serangkaian tutorial ini, aku akan membantu Anda menguasai dasar-dasar pengembangan aplikasi Android dengan Flutter. Dalam tutorial ini, yang dimulai dari seri, aku akan fokus pada Flutter widget, blok bangunan semua aplikasi Flutter.

Prasyarat

Untuk membuat sebagian besar dari seri ini, Anda akan memerlukan:

  • Versi terbaru dari Android Studio
  • perangkat atau emulator yang menjalankan Android API tingkat 21 atau lebih tinggi

1. Mengkonfigurasi Android Studio

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

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

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

Browse repositories dialog

Setelah Anda menemukan plugin, tekan tombol Install. Pada bagian ini, Anda akan diminta jika Anda ingin menginstal plugin Dart juga. Tekan ya untuk melanjutkan.

Plugin dependencies dialog

Setelah kedua plugin diinstal, tekan tombol Restart Android Studio untuk menyelesaikan konfigurasi.

2. Membuat sebuah proyek baru

Setelah restart, Anda akan dapat melihat Start a new Flutter tombol baru di layar selamat datang Android studio. Tekan untuk mulai membuat proyek Flutter pertama Anda.

Pada layar berikutnya, pilih Flutter Application dan tekan Next.

Create Flutter project dialog

Sekarang Anda akan melihat  berbagai rincian tentang aplikasi Flutter Anda, seperti nama yang diinginkan dan lokasi. Pastikan Anda mengetikkan nilai-nilai yang berlaku di semua bidang.

Flutter project configuration dialog

Plugin Flutter tidak datang dibundel dengan SDK Flutter. Oleh karena itu, Anda harus menginstal SDK secara terpisah. Anda dapat melakukannya dengan menekan tombol Install SDK.

Tergantung pada seberapa cepat koneksi Internet Anda adalah, instalasi dapat mengambil beberapa waktu untuk menyelesaikan. Setelah berhasil, Anda dapat tekan tombol Next untuk menyelesaikan pengaturan proyek.

3. Menambahkan Entry Point

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

Flutter framework menggunakan bahasa pemrograman Dart, bahasa yang mudah dipelajari bahasa sintaks yang sangat mirip dengan Java dan C. Akibatnya, seperti kebanyakan standalone Java dan program C, Flutter app juga membutuhkan main() fungsi, fungsi khusus yang berfungsi sebagai jalur masuk ke app.

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

Pada bagian ini, Anda dapat menekan Shift + F10 untuk membangun dan menjalankan app. Jika Anda tidak menemukan kesalahan pada langkah sebelumnya, Anda harus melihat aplikasi yang menampilkan sebuah kanvas putih kosong pada perangkat Anda.

4. Menggunakan Widget Stateless 

Semua aplikasi Flutter  terdiri dari satu atau lebih widget, contoh dari kelas yang memungkinkan Anda untuk menampilkan teks dan gambar pada layar. Biasanya, Anda tidak perlu program low-level widget dari awal karena kerangka datang dengan berbagai widget yang sudah dibuat, indah widgets yang mematuhi desain platform Android dan iOS.

Untuk dapat menggunakan widget basic di app, impor widget Perpustakaan dengan menambahkan kode berikut pada permulaan main.dart file:

Widget sederhana Anda dapat membuat adalah stateless widget. Seperti yang sudah bisa Anda duga, tidak mempunyai state yang berhubungan dengan mereka dan dengan demikian statis. Mereka ideal untuk menampilkan label, judul dan lainnya elemen UI yang isinya tidak mungkin untuk mengubah selagi app berjalan. Untuk membuat stateless widget, Anda harus memperpanjang kelas StatelessWidget dan meng-override metode build(). Kode contoh berikut menunjukkan Anda bagaimana:

Seperti yang Anda lihat dalam kode di atas, metode build() harus mengembalikan sebuah objek Widget. Anda akan bebas untuk memilih dan kembali lusinan widget yang sudah di sedikan oleh Flutter. Misalnya, jika Anda ingin menampilkan baris teks, Anda dapat membuat dan kembali widget Text seperti ditunjukkan di bawah ini:

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

Jika Anda menjalankan aplikasi segera, namun, Anda tidak dapat melihat teks. Ini karena, Anda masih belum dipakai widget stateless Anda. Jadi, pergi ke main() metode, instantiate widget di dalamnya, dan passing ke metode runApp(). Berikut adalah bagaimana:

Saat Anda menambahkan kode di atas dan menyimpan proyek Anda, Android Studio otomatis reload app pada perangkat Anda, memungkinkan Anda untuk melihat teks.

App showing text

Jika Anda ingin menampilkan gambar bukan teks, Anda dapat mengganti sederhana widget Text dengan Image widget di dalam metode build() kelas Anda. Kode berikut memperlihatkan bagaimana untuk membuat Image widget yang download dan menampilkan gambar dari internet:

Saat menyimpan proyek Anda lagi, Anda harus melihat sesuatu seperti ini pada perangkat Anda:

App showing an image

5. Membuat Widget Tree

Semua aplikasi flutter dapat dianggap sebagai widget tree. App yang Anda buat di langkah sebelumnya adalah widget tree dengan hanya satu widget. Menggunakan widget Text atau Image sebagai elemen atas Widget Tree, bagaimanapun, bukanlah ide yang baik karena Anda tidak akan dapat menambahkan widget child kepada mereka.

Flutter menawarkan beberapa widget yang dapat bertindak sebagai wadah untuk widget lainnya. Yang paling umum digunakan adalah widget Row dan Column. Sebagai nama yang disarankan, Row widget memungkinkan Anda untuk menempatkan beberapa widget di samping satu sama lain, dan Column widget membantu Anda posisi widget satu di bawah yang lain. Mereka sangat diperlukan sekaligus menciptakan lebih dalam widget.pohon widget tree.

Kode berikut memperlihatkan bagaimana cara menggunakan widget Column untuk membuat widget tree yang memiliki dua child: widget Text dan widget Image.

App sekarang harus terlihat seperti ini:

App showing two widgets

Selain itu, ada widget yang membantu Anda lebih baik posisi single widget. Sebagai contoh, widget Center membantu Anda untuk membuat widget ditengah. Demikian pula, sebuah Container widget memungkinkan Anda untuk menambahkan paddings dan margin untuk widget Anda.

Kode berikut memperlihatkan bagaimana menengahkan Column widget baru saja dibuat oleh penempatan di dalam sebuah widget Center:

Dalam kode di atas, perhatikan bahwa Column widget menggunakan properti tambahan yang disebut mainAxisSize, yang nilainya diatur ke min. Hal ini diperlukan karena, sebelum keterpusatan kolom, Anda harus membuat tingginya sama dengan jumlah dari ketinggian Semua child. Tanpa properti, kolom widget akan besar seperti layar perangkat, dan widget pusat tidak akan berpengaruh di atasnya.

6. Menggunakan Material Design Widget

Semua saat ini, Anda telah menggunakan dasar widget yang merupakan bagian dari perpustakaan widget. Flutter memiliki perpustakaan alternatif yang disebut material, yang menawarkan Material Design widget. Untuk menggunakannya dalam aplikasi Anda, ganti statement untuk impor widget Perpustakaan dengan berikut:

Selanjutnya, untuk menerapkan Material Design styling untuk widget Anda, Anda harus memiliki sebuah widget MaterialApp di bagian atas widget tree Anda. Anda juga harus menanamkan semua widget yang Anda buat sebelumnya dalam sebuah Scaffold widget, yang dapat berfungsi sebagai layar home MaterialApp widget.

Selain itu, karena kebanyakan Material Design aplikasi memiliki sebuah bar app, Anda dapat opsional mengatur  Scaffold widget appBar properti untuk widget AppBar baru.

Kode berikut memperlihatkan bagaimana melakukannya:

App akan terlihat jauh lebih baik sekarang.

App displaying Material Design widgets

7. Menggunakan widget Stateful

Stateless widget adalah immutable. Dengan kode yang Anda tulis di langkah sebelumnya, ada ada cara mudah untuk memodifikasi isi dari widget Text atau Image widget. Mengapa? Karena Flutter framework lebih suka pemrograman reaktif atas pemrograman imperatif. Akibatnya, sebagian besar widget yang tidak memiliki metode setter yang dapat memperbarui isi pada saat runtime. Misalnya, Text widget memiliki tidak ada metode setText() yang akan memungkinkan Anda untuk mengubah teks untuk ditampilkan.

Stateful widget, di sisi lain, bisa berubah, meskipun tidak secara langsung. Mereka bergantung pada State objek untuk memutuskan apa yang harus mereka menampilkan di setiap contoh yang diberikan. Dengan demikian, setiap kali perubahan objek State, framework secara otomatis akan memperbarui isi dari setiap stateful widget yang terhubung.

Untuk membuat stateful widget, Anda harus meng-extend kelas StatefulWidget dan meng-override metode createState().

Selanjutnya, Anda harus membuat kustom kelas State baru yang berisi variabel yang membentuk keadaan stateful widget. Selain itu, di dalam kelas, Anda harus meng-override metode build() untuk meng-return widget tree Anda.

Kode berikut memperlihatkan bagaimana untuk menciptakan sebuah State kelas yang mengandung sebuah variabel yang bernama url:

Demi contoh konkret, mari kita sekarang membuat Material Design widget tree yang mengandung Image widget, yang menampilkan gambar secara acak, dan widget RaisedButton, yang pengguna dapat menekan untuk memuat gambar acak baru. Kode berikut memperlihatkan bagaimana:

Perhatikan bahwa widget Image konstruktor sekarang mengambil variabel url sebagai input, alih-alih string literal. Hal ini memungkinkan rangka menggunakan terbaru nilai variabel setiap kali widget Image diambil.

Juga perhatikan bahwa RaisedButton widget memiliki atribut onPressed menunjuk ke listener  yang bernama changeURL(). Metode belum dibuat, jadi silahkan buat itu.

Dalam metode ini, Anda harus, tentu saja, mengubah nilai dari variabel url. Namun, Anda tidak boleh mengubah itu secara langsung. Jika Anda melakukannya, Flutter Framework tidak akan diberitahu ada perubahan. Untuk memperbarui  stateful widget dengan benar, Anda harus selalu membuat semua perubahan Anda di dalam metode setState().

Untuk saat ini, untuk menampilkan gambar acak, saya sarankan Anda menggunakan layanan sumber Unsplash. Semua yang Anda butuhkan untuk men-download gambar secara acak dari itu  membuat HTTP request ke URL-nya dan parsing string kueri yang unik untuk itu.

Kode berikut akan menunjukkan cara melakukannya menggunakan timestamp untuk membangun string permintaan unik:

Saat ini, kelas State kustom Anda sudah siap. Semua yang perlu Anda lakukan berikutnya adalah instantiate dan kembali dari metode createState() widget stateful Anda.

Jika Anda pass instance widget stateful Anda ke runApp() metode, reload app, dan tekan tombol beberapa kali, Anda harus melihatnya menampilkan foto baru setiap kali direload.

App displaying random photos

Kesimpulan

Anda sekarang tahu bagaimana bekerja dengan stateless dan stateful widget di app Flutter. Anda juga belajar bagaimana menerapkan tema Material Design, mengubah isinya secara dinamis, dan membuat mereka interaktif.

It's worth dicatat bahwa Flutter tidak menggunakan widget asli mobile platform. Ia menampilkan semua widget itu sendiri, menggunakan engine grafis 2D kinerja tinggi yang disebut Skia, yang menggunakan GPU secara ekstensif. Sebagai akibatnya, Fluter apps sering berjalan di 60 fps dan merasa sangat fluid dan responsif.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.