Saya mulai sebagai pengembang web front-end dan kemudian menjadi Bergetar pengembang. Saya pikir ada beberapa konsep yang membantu saya mengadopsi Flutter dengan lebih mudah. Ada juga beberapa konsep baru yang berbeda.
Dalam artikel ini, saya ingin berbagi pengalaman dan menginspirasi siapa pun yang merasa lumpuh karena memilih satu ekosistem daripada ekosistem lainnya dengan menunjukkan bagaimana konsep berpindah dan konsep baru apa pun dapat dipelajari.
Konsep yang Dialihkan
Bagian ini menunjukkan tempat di mana pengembangan web front-end dan Flutter mirip. Ini menjelaskan keterampilan yang sudah Anda miliki yang merupakan keuntungan bagi Anda jika Anda memulai Flutter.
1. Menerapkan Antarmuka Pengguna (UI)
Untuk mengimplementasikan UI tertentu di web front-end, Anda membuat elemen HTML dan menatanya dengan CSS. Untuk mengimplementasikan UI di Flutter, Anda menulis widget dan gaya mereka dengan properties.
Seperti CSS, Color kelas di Dart bekerja dengan "rgba" dan "hex". Juga seperti CSS, Flutter menggunakan piksel untuk unit ruang dan ukuran.
Di Flutter, kami memiliki kelas Dart dan enum untuk hampir semua properti CSS dan nilainya. Sebagai contoh:
Flutter juga memiliki Column dan Row widget. Ini adalah padanan Flutter untuk display: flex di CSS. Untuk mengonfigurasi justify-content dan align-items gaya, Anda menggunakan MainAxisAlignment dan CrossAxisAlignment properti. Untuk menyesuaikan flex-grow gaya, bungkus widget anak yang terpengaruh dari Column/Row, dalam sebuah Expanded or Flexible.
Untuk UI tingkat lanjut, Flutter memiliki CustomPaint kelas – untuk Flutter apa itu Canvas API adalah untuk pengembangan web. CustomPaint memberi Anda seorang pelukis untuk menggambar UI apa pun yang Anda inginkan. Anda biasanya akan menggunakan CustomPaint ketika Anda menginginkan sesuatu yang sangat kompleks. Juga, CustomPaint adalah cara masuk ketika kombinasi widget tidak berfungsi.
2. Berkembang Untuk Banyak Resolusi Layar
Situs web berjalan di browser dan aplikasi seluler berjalan di perangkat. Dengan demikian, saat mengembangkan untuk salah satu platform, Anda harus mengingat platform tersebut. Setiap platform mengimplementasikan fitur yang sama (kamera, lokasi, notifikasi, dll.) dengan cara yang berbeda.
Sebagai pengembang web, Anda memikirkan tentang daya tanggap situs web Anda. Anda menggunakan kueri media untuk menangani tampilan situs web Anda di layar yang lebih kecil dan lebih lebar.
Datang dari pengembangan web seluler ke Flutter, Anda memiliki MediaQuery kelas pembantu Itu MediaQuery kelas memberi Anda perangkat saat ini orientation (lanskap atau potret). Ini juga memberi Anda viewport saat ini size, yang devicePixelRatio, di antara info perangkat lainnya. Bersama-sama, nilai-nilai ini memberi Anda wawasan tentang konfigurasi perangkat seluler. Anda dapat menggunakannya untuk mengubah tampilan aplikasi seluler Anda di berbagai ukuran layar.
3. Bekerja dengan Debugger, Editor, dan Alat Baris Perintah
Browser desktop memiliki alat pengembang. Alat-alat ini termasuk inspektur, konsol, monitor jaringan, dll. Alat-alat ini meningkatkan proses pengembangan web. Flutter juga punya sendiri Alat Pengembang. Ini memiliki inspektur widget, debugger, monitor jaringan, di antara fitur-fitur lainnya.
Dukungan IDE juga serupa. Visual Studio Code adalah salah satu IDE paling populer untuk pengembangan web. Ada banyak ekstensi terkait web untuk VS Code. Flutter juga mendukung Kode VS. Jadi saat transisi, Anda tidak perlu mengubah IDE. Ada ekstensi Dart dan Flutter untuk VS Code. Flutter juga bekerja dengan baik dengan Android Studio. Baik Android Studio dan VS Code mendukung Flutter DevTools. Integrasi IDE ini membuat perkakas Flutter menjadi lengkap.
Sebagian besar kerangka kerja JavaScript front-end datang dengan antarmuka baris perintah (CLI). Sebagai contoh: CLI sudut, Buat Aplikasi Bereaksi, tampilan CLI, dll. Flutter juga hadir dengan eksklusif CLI. Flutter CLI memungkinkan Anda membangun, membuat, dan mengembangkan proyek Angular. Ini memiliki perintah untuk menganalisis dan menguji proyek Flutter.
Konsep yang Baru
Bagian ini membahas tentang konsep khusus Flutter yang lebih mudah atau tidak ada dalam pengembangan web. Ini menjelaskan ide yang harus Anda ingat saat memasuki Flutter.
Cara Menangani Pengguliran
Saat mengembangkan untuk web, perilaku pengguliran default ditangani oleh browser web. Namun, Anda bebas menyesuaikan pengguliran dengan CSS (menggunakan overflow).
Ini tidak terjadi di Flutter. Grup widget tidak menggulir secara default. Saat Anda merasakan bahwa grup widget mungkin meluap, Anda harus mengonfigurasi pengguliran secara proaktif.
Di Flutter, Anda mengonfigurasi pengguliran dengan menggunakan widget khusus yang mengizinkan pengguliran. Sebagai contoh: ListView, SingleChildScrollView, CustomScrollView, dll. Widget yang dapat digulir ini memberi Anda kontrol besar atas pengguliran. Dengan CustomScrollView, Anda dapat mengonfigurasi mekanisme gulir ahli dan kompleks dalam aplikasi.
Di sisi Flutter, menggunakan ScrollViews tidak bisa dihindari. Android dan iOS memiliki ScrollView dan UIScrollView untuk menangani pengguliran. Flutter membutuhkan cara untuk menyatukan pengalaman rendering dan developer dengan menggunakan ScrollViews, juga.
Mungkin membantu untuk berhenti memikirkan aliran struktur dokumen dan sebagai gantinya menganggap aplikasi sebagai kanvas terbuka untuk mekanisme lukisan asli perangkat.
2. Menyiapkan Lingkungan Pengembangan Anda
Untuk membuat situs web paling sederhana, Anda dapat membuat file dengan .html ekstensi dan buka di browser. Flutter tidak sesederhana itu. Untuk menggunakan Flutter, Anda harus menginstal Flutter SDK dan telah mengonfigurasi Flutter untuk perangkat uji. Jadi jika Anda ingin membuat kode Flutter untuk Android, Anda perlu siapkan Android SDK. Anda juga perlu mengonfigurasi setidaknya satu perangkat Android (Emulator Android atau perangkat fisik).
Ini adalah kasus yang sama untuk perangkat Apple (iOS dan macOS). Setelah menginstal Flutter di Mac, Anda masih perlu mengatur Xcode sebelum melangkah lebih jauh. Anda juga memerlukan setidaknya simulator iOS atau iPhone untuk menguji Flutter di iOS. Flutter untuk desktop juga merupakan pengaturan yang cukup besar. Di Windows, Anda perlu mengatur Windows Development SDK dengan Visual Studio (bukan VS Code). Di Linux, Anda akan menginstal lebih banyak paket.
Tanpa penyiapan tambahan, Flutter berfungsi di browser. Akibatnya, Anda dapat mengabaikan penyiapan tambahan untuk perangkat target. Dalam kebanyakan kasus, Anda akan menggunakan Flutter untuk pengembangan aplikasi seluler. Karenanya, Anda ingin mengatur setidaknya Android atau iOS. Flutter hadir dengan flutter doctor memerintah. Perintah ini melaporkan status penyiapan pengembangan Anda. Dengan begitu, Anda tahu apa yang harus dikerjakan, dalam pengaturan, jika perlu.
Ini tidak berarti bahwa pengembangan di Flutter lambat. Flutter hadir dengan mesin yang bertenaga. Itu flutter run perintah memungkinkan hot-reload ke perangkat uji saat coding. Tapi kemudian Anda perlu menekan R untuk benar-benar hot-reload. Ini bukan masalah. Ekstensi Kode VS Flutter memungkinkan auto-hot-reload pada perubahan file.
3. Pengemasan dan Penerapan
Menyebarkan situs web lebih murah dan lebih mudah dibandingkan dengan menerapkan aplikasi seluler. Saat Anda menerapkan situs web, Anda mengaksesnya melalui nama domain. Nama domain ini biasanya diperbarui setiap tahun. Namun, mereka opsional.
Saat ini, banyak platform menawarkan hosting gratis.
Sebagai contoh: DigitalOcean memberi Anda subdomain gratis di .ondigitalocean.com.
Anda dapat menggunakan domain ini jika Anda membuat situs web dokumentasi. Anda juga dapat menggunakannya ketika Anda tidak khawatir tentang branding.
Di dunia Flutter dengan aplikasi seluler, Anda biasanya dalam banyak kasus menerapkan aplikasi Anda ke dua tempat.
Anda harus mendaftarkan akun pengembang di masing-masing platform ini. Mendaftarkan akun pengembang memerlukan biaya atau langganan dan verifikasi identitas.
Untuk App Store, Anda harus mendaftar ke program Pengembang Apple. Anda perlu mempertahankan langganan tahunan $99. Untuk Google Play, Anda perlu membuat satu kali pembayaran $25 untuk akun.
Toko-toko ini meninjau setiap aplikasi yang ditinjau sebelum ditayangkan.
Ingatlah juga bahwa pengguna tidak mudah menggunakan pembaruan aplikasi. Pengguna harus secara eksplisit memperbarui aplikasi yang diinstal. Ini berbeda dengan web di mana setiap orang hanya dapat melihat versi situs web terbaru yang digunakan.
Mengelola aplikasi yang di-deploy relatif lebih menuntut daripada mengelola situs yang di-deploy. Namun, ini seharusnya tidak membuat Anda takut. Lagi pula, ada jutaan aplikasi yang digunakan di kedua toko sehingga Anda juga dapat menambahkan milik Anda.
Pikiran Tambahan Tentang Flutter
Flutter adalah alat lintas platform untuk membangun aplikasi desktop, seluler, atau web. Aplikasi Flutter sempurna untuk piksel. Flutter melukis UI yang sama pada setiap aplikasi terlepas dari platform target. Ini karena setiap aplikasi Flutter berisi mesin Flutter. Mesin ini merender kode UI Flutter. Flutter menyediakan kanvas untuk setiap perangkat dan memungkinkan Anda melukis sesuai keinginan. Mesin berkomunikasi dengan platform target untuk menangani peristiwa dan interaksi.
Flutter itu efisien. Ini memiliki tingkat kinerja tinggi. Ini karena dibangun dengan Dart dan memanfaatkan fitur Dart.
Dengan banyak manfaat ini, Flutter adalah pilihan yang baik untuk banyak aplikasi. Aplikasi lintas platform menghemat uang dan waktu selama produksi dan pemeliharaan. Namun, Flutter (dan solusi lintas platform) mungkin bukan pilihan yang optimal dalam beberapa kasus.
Jangan gunakan Flutter jika Anda ingin pengguna menggunakan alat pengembang platform dengan aplikasi Anda. Alat pengembang platform di sini berarti alat khusus perangkat seperti opsi pengembang Android. Ini juga termasuk alat pengembang browser.
Jangan gunakan Flutter untuk web jika Anda mengharapkan ekstensi browser berinteraksi dengan situs web.
Selain itu, jangan gunakan Flutter untuk situs web yang sarat konten.
Kesimpulan
Ini adalah ulasan tentang keterampilan yang terbawa dari pengembangan web front-end hingga bekerja dengan Flutter. Kami juga membahas konsep pengembangan aplikasi yang harus Anda pelajari sebagai pengembang web.
Flutter lebih sederhana untuk pengembang web karena keduanya melibatkan penerapan UI. Jika Anda memulai Flutter, Anda akan mengetahui bahwa itu memberi Anda pengalaman pengembang yang baik. Cobalah Flutter! Gunakan untuk membuat aplikasi seluler dan tentu saja, pamerkan apa yang Anda buat.
Cheers!
