Sejak peluncurannya yang sangat ditunggu-tunggu, Flutter telah menarik banyak perhatian, dan saya senang karenanya! Saya berharap bahwa sebagian besar aplikasi non-game akan bertransisi ke flutter, karena menyediakan pengalaman yang baik dalam membangun aplikasi multi platform.
Karena ada banyak sumber yang tersebar di internet untuk mempelajari flutter, maka saya akan merangkumnya dengan singkat— saya telah menyusun tutorial Flutter untuk membantu anda para developer untuk mulai mengembangkan aplikasi untuk Flutter.
1. Apa itu Flutter
Apa itu Flutter, dan apa bedanya dengan UI toolkit yang lain? Untuk menjadi pengembang aplikasi Flutter, Anda hanya perlu mengingat ini: Flutter dibuat agar berfungsi untuk perangkat apa pun dengan layar dan berfungsi dengan:
· iOS dan Android
· Web dan Desktop (Mac, Windows, dan Ubuntu) — Bahkan mendukung PWA
2. Menyiapkan Flutter
Flutter relatif mudah diatur dan bergantung pada OS apa yang Anda gunakan. Anda dapat melihat langkah-langkah dalam tutorial Flutter resmi ini:
https://flutter.dev/docs/get-started/install
Tetapi jika Anda mengalami sesuatu, periksa di sini:
https://github.com/flutter/flutter/wiki/Workarounds-for-common-issues#flutter-installation
Alasan saya meminta Anda mengatur Flutter sebelum Dart adalah karena ketika Anda menginstal Flutter, Anda juga menginstal Dart, dan meskipun Anda dapat menginstal Dart secara terpisah, itu akan menjadi langkah yang tidak perlu. Flutter akan memutuskan versi Dart mana yang akan digunakan, jadi menginstal versi Dart yang berbeda juga akan ambigu.
Setelah Anda mengunduh dan membuka Flutter, Anda akan melihat sesuatu seperti ini saat menjalankan perintah Flutter di konsol:
Jika Anda baru mengenal mobile development secara umum, Anda perlu mengunduh Xcode dan Android Studio. Setelah Anda menyiapkan Flutter, membuat perancah proyek baru hanyalah satu perintah.
3. Dasar Flutter
Mari kita mulai tutorial Flutter ini dengan beberapa langkah di sini:
Membuka konsole/terminal (CMD) di komputer
ketikkan perintah ini dan jalankan.
flutter create <app_name>
Dan Anda akan melihat sesuatu seperti ini:
Buka proyek di Android Studio, unduh emulator, dan versi Android jika belum selesai dan jalankan proyek
Pahami bagaimana Anda harus menyusun direktori proyek Anda dan memahami file mana yang dimaksudkan untuk tujuan apa.
Sekarang setelah Anda menyiapkan flutter, langkah lain dalam Tutorial Flutter ini adalah melakukan apa yang dilakukan semua developer. Hal yang harus dilakukan yaitu membuat konfigurasi pada flutter di pubspec.yaml.
File pubspec
https://dart.dev/tools/pub/pubspec
4. Widget
Widget dibagi dalam 2 jenis: stateless dan stateful
Stateless Widget adalah widget yang statusnya tidak berubah seperti tombol atau gambar. Seperti namanya, statusnya tidak berubah saat tindakan dilakukan di layar.
Saat widget perlu menahan beberapa status seperti halaman saat ini di Page View, tab yang saat ini dipilih di sebuah Bottom Navigation Bar, Widget stateful adalah pilihan yang tepat untuk dibuat.
StatefulWidgets dapat menahan status Widget saat ini. Daripada menggunakan widget utnuk membangun method, Stateful Widget memiliki state untuk build metode yang terpanggil setiap kali kita secara eksplisit memanggil setState.
Dan Demikian pula, lihat dokumentasi (ada video di dalamnya) untuk widget stateful di sini:
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
5. Tata Letak di Flutter
Seperti yang telah kita bahas sebelumnya dalam panduan Flutter ini, semuanya adalah widget di Flutter — termasuk model tata letak.
Lihat dokumentasinya di sini:
https://flutter.dev/docs/development/ui/layout
Widget seperti baris, kolom, dan kisi adalah widget tata letak (yang tidak kita lihat di layar) yang membantu widget lain yang terlihat untuk mengatur, membatasi, dan menyelaraskan.
Flutter hadir dengan rangkaian Widget dasar yang kuat seperti Text, Column, Row, Stack, dan Container. Widget dasar akan membantu Anda membuat tampilan kustom sesuai keinginan.
Flutter memiliki banyak hal untuk dibahas secara default. Flutter menyediakan beberapa widget yang mendukung Desain Material. Ini termasuk widget MaterialApp, AppBar, Scaffold, dll.
6. Widget Interaktif
Sejauh ini dalam tutorial langkah demi langkah Flutter ini, kita telah melihat Widget yang menampilkan informasi di layar atau mengatur widget lain. Untuk aplikasi yang real, sama pentingnya untuk membuat aplikasi interaktif dan mendapatkan masukan pengguna dalam berbagai bentuk seperti Gestur, ketukan, dll.
Untuk mencapai ini, Flutter memiliki sejumlah StatefullWidgets seperti Checkbox, Radio, Slider, InkWell, Form, and TextField, dll. Widget ini cukup mampu untuk mempertahankan statusnya (misalnya, Teks yang kita masukkan di TextField, apakah Daftar Periksa dicentang atau tidak.)
Cookbook di Flutter
Dan ini dia, saatnya mempelajari Flutter untuk aplikasi nyata dengan bantuan Flutter Cookbook. Maksud saya Aplikasi yang memiliki Banyak layar, Gambar, ketergantungan Jaringan, dan semuanya.
7. Mendesain Aplikasi
Periksa ilustrasi aplikasi di bawah ini.
Aplikasi yang terlihat sederhana ini memiliki fitur-fitur ini
1. Navigasi Dashboard
https://flutter.dev/docs/cookbook/design/drawer
2. SnackBar
https://flutter.dev/docs/cookbook/design/snackbars
3. Font Kustom
https://flutter.dev/docs/cookbook/design/package-fonts
4. Sebuah teks dan berdasarkan Orientasi
https://flutter.dev/docs/cookbook/design/orientation
5. Banyak Tab
https://flutter.dev/docs/cookbook/design/tabs
8 Form
Flutter memiliki widget Form yang membantu membangun formulir yang secara efisien mengelola persyaratan penting Formulir, misalnya Status Formulir,
https://flutter.dev/docs/cookbook#forms
9. Image
Untuk membuat aplikasi indah dan menarik, gunakanlah Imag. Flutter menyediakan widget Image untuk menampilkan gambar di aplikasi Flutter dari berbagai sumber.
1. Tampilkan Image dari Jaringan
https://flutter.dev/docs/cookbook/images/network-image
2. Tampilan Image dengan Placeholder & dengan Fade-in Animation
https://flutter.dev/docs/cookbook/images/fading-in-images
3. Terkadang berguna untuk memuat gambar dari jaringan dan menyimpannya di penyimpanan lokal untuk membuatnya tersedia dengan cepat di lain waktu.
https://flutter.dev/docs/cookbook/images/cached-images
10. Menampilkan lebih banyak data menggunakan List
Untuk menampung lebih banyak data, biasanya menggunakan Daftar untuk menampilkannya. Daftarnya bisa horizontal atau linier.
Flutter memiliki GridView dan ListView. Ini adalah widget dasar yang berbeda untuk mengidentifikasi bagaimana mereka dapat digunakan.
1. Buat daftar kisi
https://flutter.dev/docs/cookbook/lists/grid-lists
2. Buat daftar secara horizontal
https://flutter.dev/docs/cookbook/lists/horizontal-list
3. Daftar dapat memiliki berbagai jenis Item. Misalnya, header & item untuk itu. Periksa di sini bagaimana Anda dapat menutupi kasus seperti itu di ListView.
https://flutter.dev/docs/cookbook/lists/mixed-list
4. Bilah aplikasi mengambang dan pengguliran bersarang menggunakan SliverList
https://flutter.dev/docs/cookbook/lists/floating-app-bar
5. Terkadang memiliki item arbitrer yang telah ditentukan sebelumnya untuk ditempatkan dalam Daftar. misalnya, kategori Pengaturan. Di ListView, Anda dapat meneruskan item khusus (dalam bentuk Widget) kepada anak-anaknya.
https://flutter.dev/docs/cookbook/lists/basic-list
Sekian saja yang dapat saya bagikan, sekiranya dapat bermanfaat bagi Anda.
