Menggunakan Flutter Google Untuk Pengembangan Seluler yang Benar-Benar Lintas-Platform

Flutter adalah kerangka kerja pengembangan seluler lintas platform sumber terbuka dari Google. Ini memungkinkan aplikasi berkinerja tinggi dan indah untuk dibangun untuk iOS dan Android dari satu basis kode. Ini juga merupakan platform pengembangan untuk sistem operasi Fuchsia Google yang akan datang. Selain itu, ia dirancang sedemikian rupa sehingga dapat dibawa ke platform lain, melalui penyemat mesin Flutter khusus.

Mengapa Flutter Dibuat Dan Mengapa Anda Harus Menggunakannya

Toolkit lintas platform secara historis mengambil salah satu dari dua pendekatan:

• Mereka membungkus tampilan web dalam aplikasi asli dan membangun aplikasi seolah-olah itu adalah situs web.
• Mereka membungkus kontrol platform asli dan memberikan beberapa abstraksi lintas platform di atasnya.

Flutter mengambil pendekatan berbeda dalam upaya membuat pengembangan seluler lebih baik. Ini menyediakan kerangka kerja pengembang aplikasi bekerja melawan dan mesin dengan runtime portabel untuk meng-host aplikasi. Kerangka kerja ini dibangun di atas pustaka grafis Skia, menyediakan widget yang benar-benar dirender, bukan hanya sebagai pembungkus pada kontrol asli.

Pendekatan ini memberikan fleksibilitas untuk membangun aplikasi lintas platform dengan cara yang sepenuhnya khusus seperti yang disediakan oleh opsi pembungkus web, tetapi pada saat yang sama menawarkan kinerja yang mulus. Sementara itu, perpustakaan widget kaya yang hadir dengan Flutter, bersama dengan banyak widget sumber terbuka, menjadikannya platform yang sangat kaya fitur untuk digunakan. Sederhananya, Flutter adalah hal terdekat yang dimiliki pengembang seluler untuk pengembangan lintas platform dengan sedikit atau tanpa kompromi.

Anak panah

Aplikasi Flutter ditulis dalam Dart, yang merupakan bahasa pemrograman yang awalnya dikembangkan oleh Google. Dart adalah bahasa berorientasi objek yang mendukung kompilasi sebelumnya dan tepat waktu, membuatnya sangat cocok untuk membangun aplikasi asli, sekaligus menyediakan alur kerja pengembangan yang efisien dengan hot reload Flutter. Flutter baru-baru ini juga pindah ke Dart versi 2.0.

Bahasa Dart menawarkan banyak fitur yang terlihat dalam bahasa lain termasuk pengumpulan sampah, async-wait, pengetikan yang kuat, generik, serta perpustakaan standar yang kaya.

Dart menawarkan persimpangan fitur yang seharusnya familiar bagi pengembang yang berasal dari berbagai bahasa, seperti C#, JavaScript, F#, Swift, dan Java. Selain itu, Dart dapat dikompilasi ke Javascript. Dikombinasikan dengan Flutter, ini memungkinkan kode untuk dibagikan di seluruh platform web dan seluler.

Garis Waktu Sejarah Peristiwa

• April 2015
  Flutter (awalnya dengan nama kode Sky) ditampilkan di Dart Developer Summit
• November 2015
  Sky berganti nama menjadi Flutter
• Februari 2018
  Flutter beta 1 diumumkan di Mobile World Congress 2018
• April 2018
  Flutter beta 2 diumumkan
• Mei 2018
  Flutter beta 3 diumumkan di Google I/O. Google mengumumkan Flutter siap untuk aplikasi produksi

Perbandingan Dengan Platform Pengembangan Lainnya

Apple/Android Asli

Aplikasi asli menawarkan sedikit gesekan dalam mengadopsi fitur baru. Mereka cenderung memiliki pengalaman pengguna yang lebih selaras dengan platform yang diberikan karena aplikasi dibangun menggunakan kontrol dari vendor platform itu sendiri (Apple atau Google) dan sering mengikuti pedoman desain yang ditetapkan oleh vendor ini. Dalam kebanyakan kasus, aplikasi asli akan berkinerja lebih baik daripada yang dibangun dengan penawaran lintas platform, meskipun perbedaannya dapat diabaikan dalam banyak kasus tergantung pada teknologi lintas platform yang mendasarinya.

Satu keuntungan besar yang dimiliki aplikasi asli adalah mereka dapat mengadopsi teknologi baru yang dibuat Apple dan Google dalam versi beta segera jika diinginkan, tanpa harus menunggu integrasi pihak ketiga. Kerugian utama untuk membangun aplikasi asli adalah kurangnya penggunaan kembali kode di seluruh platform, yang dapat membuat pengembangan menjadi mahal jika menargetkan iOS dan Android.

Bereaksi Asli

React Native memungkinkan aplikasi asli dibangun menggunakan JavaScript. Kontrol sebenarnya yang digunakan aplikasi adalah kontrol platform asli, sehingga pengguna akhir merasakan aplikasi asli. Untuk aplikasi yang memerlukan penyesuaian di luar apa yang disediakan oleh abstraksi React Native, pengembangan asli masih diperlukan. Dalam kasus di mana jumlah penyesuaian yang diperlukan sangat besar, manfaat bekerja di dalam lapisan abstraksi React Native berkurang ke titik di mana dalam beberapa kasus mengembangkan aplikasi secara asli akan lebih bermanfaat.

Xamarin

Saat membahas Xamarin, ada dua pendekatan berbeda yang perlu dievaluasi. Untuk pendekatan lintas platform mereka yang paling, ada Xamarin.Forms. Meskipun teknologinya sangat berbeda dengan React Native, secara konseptual ia menawarkan pendekatan serupa karena mengabstraksi kontrol asli. Demikian juga, ia memiliki kelemahan serupa sehubungan dengan penyesuaian.

Kedua, ada banyak istilah Xamarin-klasik. Pendekatan ini menggunakan produk iOS dan Android Xamarin secara independen untuk membangun fitur khusus platform, seperti ketika langsung menggunakan Apple/Android asli, hanya menggunakan C# atau F# dalam kasus Xamarin. Manfaat dengan Xamarin adalah kode khusus non-platform, hal-hal seperti jaringan, akses data, layanan web, dll. dapat dibagikan.

Tidak seperti alternatif ini, Flutter mencoba memberi pengembang solusi lintas platform yang lebih lengkap, dengan penggunaan kembali kode, antarmuka pengguna yang lancar, kinerja tinggi, dan perkakas yang sangat baik.

Ikhtisar Aplikasi Flutter

Membuat Aplikasi

Setelah menginstal Flutter, membuat aplikasi dengan Flutter semudah membuka baris perintah dan memasukkan flutter create [app_name] , memilih perintah “Flutter: New Project” di VS Code, atau memilih “Start a new Flutter Project” di Android Studio atau IntelliJ.

Terlepas dari apakah Anda memilih untuk menggunakan IDE atau baris perintah bersama dengan editor pilihan Anda, template aplikasi Flutter yang baru memberi Anda titik awal yang baik untuk sebuah aplikasi.

Aplikasi membawa paket flutter / material.dart untuk menawarkan beberapa perancah dasar untuk aplikasi, seperti bilah judul, ikon material, dan tema. Ini juga menyiapkan widget stateful untuk mendemonstrasikan cara memperbarui antarmuka pengguna saat status aplikasi berubah.

Opsi Perkakas

Flutter menawarkan fleksibilitas luar biasa terkait dengan perkakas. Aplikasi dapat dengan mudah dikembangkan dari baris perintah bersama dengan editor apa pun, seperti halnya dari IDE yang didukung seperti VS Code, Android Studio, atau IntelliJ. Pendekatan yang diambil sangat bergantung pada preferensi pengembang.

Android Studio menawarkan fitur terbanyak, seperti Flutter Inspector untuk menganalisis widget aplikasi yang sedang berjalan dan juga memantau kinerja aplikasi. Ini juga menawarkan beberapa refactoring yang nyaman saat mengembangkan hierarki widget.

VS Code menawarkan pengalaman pengembangan yang lebih ringan karena cenderung memulai lebih cepat daripada Android Studio/IntelliJ. Setiap IDE menawarkan pembantu pengeditan bawaan, seperti penyelesaian kode, memungkinkan eksplorasi berbagai API serta dukungan debugging yang baik.

Baris perintah juga didukung dengan baik melalui perintah flutter , yang memudahkan untuk membuat, memperbarui, dan meluncurkan aplikasi tanpa ketergantungan perkakas lain di luar editor.

Muat Ulang Panas

Terlepas dari perkakas, Flutter mempertahankan dukungan yang sangat baik untuk pemuatan ulang aplikasi yang panas. Ini memungkinkan aplikasi yang berjalan untuk dimodifikasi dalam banyak kasus, mempertahankan status, tanpa harus menghentikan aplikasi, membangun kembali, dan menerapkan ulang.

Hot reload secara dramatis meningkatkan efisiensi pengembangan dengan memungkinkan iterasi yang lebih cepat. Itu benar-benar membuat platform menyenangkan untuk digunakan.

Pengujian

Flutter menyertakan utilitas WidgetTester untuk berinteraksi dengan widget dari pengujian. Template aplikasi baru menyertakan pengujian sampel untuk mendemonstrasikan cara menggunakannya saat membuat pengujian, seperti yang ditunjukkan di bawah ini:

 // Test included with the new Flutter application template import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:myapp/main.dart'; void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async { // Build our app and trigger a frame. await tester.pumpWidget(new MyApp()); // Verify that our counter starts at 0. expect(find.text('0'), findsOneWidget); expect(find.text('1'), findsNothing); // Tap the '+' icon and trigger a frame. await tester.tap(find.byIcon(Icons.add)); await tester.pump(); // Verify that our counter has incremented. expect(find.text('0'), findsNothing); expect(find.text('1'), findsOneWidget); }); }

Menggunakan Paket Dan Plugin

Flutter baru saja dimulai, tetapi sudah ada ekosistem pengembang yang kaya: Sejumlah besar paket dan plugin sudah tersedia untuk pengembang.

Untuk menambahkan paket atau plugin, cukup sertakan dependensi dalam file pubspec.yaml di direktori root aplikasi. Kemudian jalankan flutter packages get dari baris perintah atau melalui IDE, dan alat Flutter akan memasukkan semua dependensi yang diperlukan.

Misalnya, untuk menggunakan plugin pemilih gambar populer untuk Flutter, pubspec.yaml hanya perlu mencantumkannya sebagai dependensi seperti:

 dependencies: image_picker: "^0.4.1"

Kemudian menjalankan flutter packages get semua yang Anda butuhkan untuk menggunakannya, setelah itu dapat diimpor dan digunakan di Dart:

 import 'package:image_picker/image_picker.dart';

Widget

Semua yang ada di Flutter adalah widget. Ini termasuk elemen antarmuka pengguna, seperti ListView , TextBox , dan Image , serta bagian lain dari kerangka kerja, termasuk tata letak, animasi, pengenalan gerakan, dan tema, untuk menyebutkan beberapa saja.

Dengan menjadikan semuanya sebagai widget, seluruh aplikasi, yang notabene juga merupakan widget, dapat direpresentasikan dalam hierarki widget. Memiliki arsitektur di mana semuanya adalah widget memperjelas dari mana atribut dan perilaku tertentu yang diterapkan pada sebagian aplikasi berasal. Ini berbeda dari kebanyakan kerangka kerja aplikasi lain, yang mengaitkan properti dan perilaku secara tidak konsisten, terkadang melampirkannya dari komponen lain dalam hierarki dan terkadang pada kontrol itu sendiri.

Contoh Widget UI Sederhana

Titik masuk ke aplikasi Flutter adalah fungsi utamanya. Untuk menempatkan widget untuk elemen antarmuka pengguna di layar, di main() panggil runApp() dan berikan widget yang akan berfungsi sebagai akar hierarki widget.

 import 'package:flutter/material.dart'; void main() { runApp( Container(color: Colors.lightBlue) ); }

Ini menghasilkan widget Container berwarna biru muda yang memenuhi layar:

Widget Stateless vs. Stateful

Widget datang dalam dua rasa: stateless dan stateful. Widget stateless tidak mengubah kontennya setelah dibuat dan diinisialisasi, sedangkan widget stateful mempertahankan beberapa status yang dapat berubah saat menjalankan aplikasi, misalnya sebagai respons terhadap interaksi pengguna.

Dalam contoh ini, widget FlatButton dan widget Text digambar ke layar. Widget Text dimulai dengan beberapa String default untuk statusnya. Menekan tombol menghasilkan perubahan status yang akan menyebabkan widget Text diperbarui, menampilkan String baru.

Untuk merangkum widget, buat kelas yang diturunkan dari StatelessWidget atau StatefulWidget . Misalnya, Container biru muda dapat ditulis sebagai berikut:

 class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container(color: Colors.lightBlue); } }

Flutter akan memanggil metode pembuatan widget saat dimasukkan ke dalam pohon widget sehingga bagian UI ini dapat dirender.

Untuk widget stateful, dapatkan dari StatefulWidget :

 class MyStatefulWidget extends StatefulWidget { MyStatefulWidget(); @override State createState() { return MyWidgetState(); } } class MyStatefulWidget extends StatefulWidget { MyStatefulWidget(); @override State createState() { return MyWidgetState(); } }

Widget stateful mengembalikan kelas State yang bertanggung jawab untuk membangun pohon widget untuk status tertentu. Saat status berubah, bagian terkait dari pohon widget akan dibangun kembali.

Dalam kode berikut, kelas State memperbarui String saat tombol diklik:

 class MyWidgetState extends State { String text = "some text"; @override Widget build(BuildContext context) { return Container( color: Colors.lightBlue, child: Padding( padding: const EdgeInsets.all(50.0), child: Directionality( textDirection: TextDirection.ltr, child: Column( children: [ FlatButton( child: Text('Set State'), onPressed: () { setState(() { text = "some new text"; }); }, ), Text( text, style: TextStyle(fontSize: 20.0)), ], ) ) ) ); } } class MyWidgetState extends State { String text = "some text"; @override Widget build(BuildContext context) { return Container( color: Colors.lightBlue, child: Padding( padding: const EdgeInsets.all(50.0), child: Directionality( textDirection: TextDirection.ltr, child: Column( children: [ FlatButton( child: Text('Set State'), onPressed: () { setState(() { text = "some new text"; }); }, ), Text( text, style: TextStyle(fontSize: 20.0)), ], ) ) ) ); } }

Status diperbarui dalam fungsi yang diteruskan ke setState() . Saat setState() dipanggil, fungsi ini dapat menyetel status internal apa pun, seperti string dalam contoh ini. Kemudian, metode build akan dipanggil, memperbarui pohon widget stateful.

Perhatikan juga penggunaan widget Directionality untuk menyetel arah teks untuk widget apa pun di subpohonnya yang memerlukannya, seperti widget Text . Contoh di sini adalah membuat kode dari awal, jadi Directionality diperlukan di suatu tempat di hierarki widget. Namun, menggunakan widget MaterialApp , seperti dengan template aplikasi default, menyetel arah teks secara implisit.

tata letak

Fungsi runApp mengembang widget untuk mengisi layar secara default. Untuk mengontrol tata letak widget, Flutter menawarkan berbagai widget tata letak. Ada widget untuk melakukan tata letak yang menyelaraskan widget anak secara vertikal atau horizontal, memperluas widget untuk mengisi ruang tertentu, membatasi widget ke area tertentu, memusatkannya di layar, dan memungkinkan widget saling tumpang tindih.

Dua widget yang umum digunakan adalah Row dan Column . Widget ini melakukan tata letak untuk menampilkan widget turunannya secara horizontal (Baris) atau vertikal (Kolom).

Menggunakan widget tata letak ini hanya melibatkan membungkusnya di sekitar daftar widget anak. mainAxisAlignment mengontrol bagaimana widget diposisikan di sepanjang sumbu tata letak, baik di tengah, di awal, akhir, atau dengan berbagai opsi penspasian.

Kode berikut menunjukkan cara menyelaraskan beberapa widget anak di Row atau Column :

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( //change to Column for vertical layout mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.android, size: 30.0), Icon(Icons.pets, size: 10.0), Icon(Icons.stars, size: 75.0), Icon(Icons.rowing, size: 25.0), ], ); } } 

Menanggapi Sentuhan

Interaksi sentuhan ditangani dengan gerakan, yang dienkapsulasi dalam kelas GestureDetector . Karena ini juga merupakan widget, menambahkan pengenalan gerakan semudah membungkus widget anak dalam GestureDetector .

Misalnya, untuk menambahkan penanganan sentuh ke Icon , buatlah itu menjadi turunan dari GestureDetector dan atur penangan detektor untuk menangkap gerakan yang diinginkan.

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () => print('you tapped the star'), onDoubleTap: () => print('you double tapped the star'), onLongPress: () => print('you long pressed the star'), child: Icon(Icons.stars, size: 200.0), ); } }

Dalam hal ini, ketika ketukan, ketuk dua kali, atau tekan lama dilakukan pada ikon, teks terkait akan dicetak:

 To hot reload your app on the fly, press "r". To restart the app entirely, press "R". An Observatory debugger and profiler on iPhone X is available at: https://127.0.0.1:8100/ For a more detailed help message, press "h". To quit, press "q". flutter: you tapped the star flutter: you double tapped the star flutter: you long pressed the star

Selain gerakan ketuk sederhana, ada banyak pengenal, untuk semuanya mulai dari menggeser dan menskalakan, hingga menyeret. Ini membuatnya sangat mudah untuk membangun aplikasi interaktif.

Lukisan

Flutter juga menawarkan berbagai widget untuk melukis termasuk yang memodifikasi opacity, mengatur jalur kliping, dan menerapkan dekorasi. Bahkan mendukung lukisan kustom melalui widget CustomPaint , dan kelas CustomPainter dan Canvas terkait.

Salah satu contoh widget lukisan adalah DecoratedBox , yang dapat melukis BoxDecoration ke layar. Contoh berikut menunjukkan cara menggunakan ini untuk mengisi layar dengan isian gradien:

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new DecoratedBox( child: Icon(Icons.stars, size: 200.0), decoration: new BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } } 

Animasi

Flutter menyertakan kelas AnimationController yang mengontrol pemutaran animasi dari waktu ke waktu, termasuk memulai dan menghentikan animasi, serta memvariasikan nilai ke animasi. Selain itu, ada widget AnimatedBuilder yang memungkinkan pembuatan animasi bersama dengan AnimationController .

Widget apa pun, seperti bintang berhias yang ditampilkan sebelumnya, dapat memiliki properti yang dianimasikan. Misalnya, memfaktorkan ulang kode ke StatefulWidget , karena menganimasikan adalah perubahan status, dan meneruskan AnimationController ke kelas State memungkinkan nilai animasi digunakan saat widget dibuat.

 class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } } class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } } class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } }

Dalam hal ini, nilai digunakan untuk memvariasikan ukuran widget. Fungsi builder dipanggil setiap kali nilai animasi berubah, menyebabkan ukuran bintang bervariasi lebih dari 750 md, menciptakan skala yang berlaku:

Menggunakan Fitur Asli

Saluran Platform

Untuk menyediakan akses ke API platform asli di Android dan iOS, aplikasi Flutter dapat menggunakan saluran platform. Ini memungkinkan kode Flutter Dart mengirim pesan ke aplikasi iOS atau Android hosting. Banyak plugin open-source yang tersedia dibuat menggunakan perpesanan melalui saluran platform. Untuk mempelajari cara bekerja dengan saluran platform, dokumentasi Flutter menyertakan dokumen bagus yang menunjukkan cara mengakses API baterai asli.

Kesimpulan

Bahkan dalam versi beta, Flutter menawarkan solusi hebat untuk membangun aplikasi lintas platform. Dengan perkakas yang sangat baik dan reload panas, ini membawa pengalaman pengembangan yang sangat menyenangkan. Kekayaan paket sumber terbuka dan dokumentasi yang sangat baik memudahkan untuk memulai. Ke depan, pengembang Flutter akan dapat menargetkan Fuchsia selain iOS dan Android. Mempertimbangkan ekstensibilitas arsitektur mesin, tidak mengejutkan saya melihat Flutter mendarat di berbagai platform lain juga. Dengan komunitas yang berkembang, ini saat yang tepat untuk bergabung.

Langkah selanjutnya

• Instal Flutter
• Tur Bahasa Dart
• Codelab Flutter
• Kursus Flutter Udacity
• Kode Sumber Artikel