Clever Geek Handbook

Pengumuman Flutter 1.22

Halo! Saya Evgeny Saturov, Flutter TeamLead di Surf . Saya menyajikan terjemahan artikel resmi tentang pembaruan Flutter 1.22 yang baru - seperti biasa, dilengkapi dengan komentar saya.



Rilis ini adalah salah satu yang paling luar biasa bagi saya dalam beberapa tahun terakhir. Kami bergerak maju tidak hanya karena munculnya widget baru yang tidak akan mengejutkan siapa pun, tetapi juga karena perubahan infrastruktur yang serius, serta dukungan operasional untuk sistem operasi baru. Ini baru permulaan!



Berkendara untuk berkenalan dengan versi baru Flutter 1.22.









Kami dengan bangga mengumumkan rilis terbaru Flutter, dengan dukungan ekstensif untuk iOS 14 dan Android 11. Flutter 1.22 dibangun di atas fondasi yang ditetapkan oleh rilis sebelumnya dan memungkinkan pengembang untuk membuat antarmuka pengguna yang cepat dan indah untuk banyak platform dari satu basis kode. Rilis stabil triwulanan kami berisi fitur-fitur baru, peningkatan kinerja, dan perbaikan bug.



Versi baru dari OS seluler telah dirilis baru-baru ini. Kami berfokus untuk membuat Android 11 dan iOS 14 bekerja dengan baik pada rilis Flutter ini.



Pembaruan Flutter untuk iOS 14 : dukungan untuk Xcode 12 baru, ikon baru dan dukungan untuk App Clips - analog dari Aplikasi Instan untuk Android.



Pembaruan Flutter untuk Android 11: menambahkan dukungan untuk berbagai jenis "poni" untuk tampilan, serta animasi yang lebih halus saat memanggil keyboard lunak.



Rilis ini keluar hanya dua bulan setelah rilis versi 1.20, tetapi bahkan dalam waktu singkat ini kami menutup 3024 masalah dan membekukan 1944 PR dari 197 kontributor.



Komentar



Ngomong-ngomong, jika Anda sudah lama ingin menjadi kontributor Flutter, tetapi tidak tahu harus mulai dari mana, berikut adalah beberapa tip. Filter masalah dengan tag kontribusi pertama yang baik : dari waktu ke waktu, masalah menarik muncul di sana, yang dengannya Anda dapat memulai perjalanan Anda ke open source. Selain itu, Anda dapat menerapkan fitur impian seseorang dengan memfilter masalah dengan tag fitur baru . Ada teka-teki bahkan untuk pemula. Anda akan dapat mengabadikan nama Anda dalam sejarah kerangka kerja - tentu saja, jika pengembang tim Flutter setuju bahwa fitur seperti itu harus diterapkan.





Selain mendukung versi OS seluler baru, kami memiliki berita lain, termasuk pratinjau salah satu fitur Android yang paling banyak diminta: 



  • pemulihan negara, 

  • Bahan tombol "semesta" baru, 

  • perpustakaan baru untuk mendukung pelokalan dan internasionalisasi, bekerja dengan Hot Reload, 

  • Navigator baru, 

  • versi stabil untuk Tampilan Platform (dasar untuk Google Maps dan plugin WebView),

  • sakelar yang dapat Anda tambahkan ke kode untuk meningkatkan pengguliran pada perangkat dengan tampilan frekuensi tinggi. 



Kami juga memiliki alat baru untuk menganalisis ukuran aplikasi. Selain itu, pengembang sekarang dapat membuat plugin hanya untuk platform yang mereka butuhkan dengan secara eksplisit menentukan platform target dalam konfigurasi plugin.



Platform target iOS 14



Setiap kali versi baru OS seluler diumumkan, kami mengujinya secara menyeluruh: kami mencari ketidakcocokan atau perubahan yang dapat memengaruhi pengoperasian Flutter dan alatnya.



Dalam kasus iOS 14, kami membuat beberapa perubahan pada Flutter untuk memastikannya bekerja persis seperti yang diinginkan pengembang:



  • Xcode 12 membutuhkan iOS 9.0 atau lebih tinggi, jadi template default kami sekarang menentukan 9.0, bukan platform 8.0.

  • Flutter 1.22 memperbaiki crash iOS 14 tertentu dan masalah rendering font.

  • Masalah terkait penerapan ke perangkat fisik (aplikasi tidak berjalan di perangkat - hanya di emulator) telah diperbaiki di Flutter 1.20.4.

  • , , , Flutter Flutter 1.20.4.

  • Flutter iOS 14 ( , Flutter-).



Intinya: jika iOS 14 adalah platform target untuk aplikasi Flutter Anda, kami sangat menyarankan Anda membangunnya kembali dengan Flutter 1.22 dan menerapkannya ke App Store sekarang juga untuk memberikan pengalaman pengguna terbaik bagi mereka yang menggunakan iOS 14.



Informasi lebih lanjut termasuk untuk beberapa pemikiran tentang Add-to-App, tautan dalam dan pemberitahuan, lihat dokumentasi iOS 14 di flutter.dev .



Secara terpisah, kami ingin menyampaikan tentang dukungan yang diperbarui untuk font Simbol SF iOS baru, yang menginspirasi kami untuk meluangkan waktu untuk memperbarui paket cupertino_icon . Kasus penggunaan yang ada CupertinoIconsakan otomatis ditampilkan dalam gaya baru segera setelah Anda memperbarui dependensicupertino_iconske versi mayor baru 1.0. Jika Anda menggunakan cupertino_icons1.0 bersama dengan Flutter 1.22, Anda akan memiliki akses ke ~ 900 ikon baru melalui CupertinoIcons API .







Untuk daftar lengkap ikon, lihat halaman pratinjau cupertino_icons dan halaman detail migrasi di flutter.dev .



Fitur lain yang dapat Anda coba dengan Flutter di iOS 14 adalah App Clips. App Clips adalah fitur baru iOS 14: ini adalah aplikasi mini dengan berat hingga 10 MB. Mereka memberi pengguna akses ke fungsi tertentu tanpa harus mengunduh aplikasi lengkap dari AppStore. Flutter versi 1.22 dapat bekerja dengan App Clips dalam implementasi awal.





Klip Aplikasi di Flutter



Untuk informasi lebih lanjut tentang cara membuat App Clips dari aplikasi menggunakan Flutter, lihat dokumentasi di flutter.dev . Lihat juga contoh proyek sederhana .



Komentar



Ingat Aplikasi Instan untuk Android? Sepertinya Apple memutuskan untuk mengembalikan tahun 2017 kami dan memperkenalkan solusi serupa - Klip Aplikasi. Selain itu, Anda dapat mengimplementasikan Klip Aplikasi meskipun Anda tidak menulis aplikasi asli, tetapi aplikasi lintas platform.



Jangan lupa tentang batasannya: jika perakitan Anda memiliki berat lebih dari 10 MB, maka perakitan tidak akan berfungsi untuk menjalankannya dalam format Klip Aplikasi. Dalam kasus aplikasi Flutter, ini bisa menjadi masalah yang sangat mendesak. Tetapi Anda akan mempelajari hal ini di paruh kedua artikel: di sana kami akan memberi tahu Anda bagaimana Anda dapat memantau ukuran build aplikasi Anda menggunakan alat praktis.





Android 11



Rilis Flutter ini keluar hampir bersamaan dengan rilis Android 11. Kerangka kerja dan mesin Flutter telah diperbarui untuk mendukung dua fitur baru yang diperkenalkan di versi terbaru Android.



Pertama, Flutter sekarang memperhitungkan lokasi poni dan potongan di layar ponsel Android, serta tepi layar yang membulat.







Menggunakan API MediaQuery dan SafeArea , sekarang mudah untuk menulis UI di mana area yang dapat diklik tidak mendarat di potongan dan tepi layar yang membulat. 



Area aplikasi yang terlihat tidak berubah ukuran secara tiba-tiba, tetapi mulus. Konten aplikasi akan bergulir secara sinkron dengan keyboard di layar.





Perhatikan FAB



Issue # 19279- Masalah lama saat animasi tampilkan / sembunyikan keyboard di layar tidak disinkronkan dengan inset Flutter. Ini telah diperbaiki untuk Android 11. 



Sebelumnya, ada masalah karena plugin Flutter saat kode Flutter dimasukkan ke dalam aplikasi Android asli. Kami telah menulis ulang API untuk mengintegrasikan Flutter dengan Android dan merilis API v2, yang bebas dari kekurangan ini. Dimulai dengan versi 1.22, kami menghentikan dukungan untuk API v1 lama.



Jika Anda terus menggunakan Android v1 API, inilah artinya bagi Anda:



  • Plugin baru dibuat tanpa dukungan API v1.

  • Bendera konfigurasi alat Flutter —no-enable-android-embedding-v2telah dihapus. Ini adalah perilaku default sekarang.

  • Aplikasi lama yang masih menggunakan API v1 akan menampilkan peringatan penghentian selama pembuatan, yang mengacu pada dokumentasi untuk mendukung API plugin Android baru .



Sementara itu, jika Anda masih memiliki aplikasi Flutter berdasarkan API versi 1 untuk Android, itu akan terus berfungsi. Namun, Anda mungkin mulai melihat plugin baru yang menargetkan API v2. Mereka tidak dapat digunakan oleh Android API v1. Untuk informasi selengkapnya, lihat dokumentasi untuk perubahan yang dapat menyebabkan gangguan .







, Flutter , . 1.22 , — . App Clips, ( ) , . Android, , , — . .





«»



Tombol Flutter yang ada terlihat bagus tetapi mungkin sulit digunakan , terutama jika Anda memerlukan tema khusus. Selain itu, spesifikasi Material telah diperluas dengan menyertakan tombol baru dengan gaya baru.



Untuk mengikuti pedoman Material, kami memperkenalkan tombol "semesta" baru di Flutter 1.22.





"Semesta"



baru tombol Desain material Widget dan tema baru memiliki nama kelas baru. Kami mengganti nama kelas di Flutter agar sesuai dengan spesifikasi Desain Material .







Tema baru mengikuti pola "dinormalisasi" yang baru-baru ini diadopsi Flutter untuk widget Material baru. Versi demo di DartPad



Ini bukan perubahan melanggar, karena semantik FlatButton, OutlineButton,RaisedButton, ButtonBar, ButtonBarThemeDan ButtonThemetidak akan berubah. Anda dapat mencampur dan mencocokkan tombol lama dengan yang baru. 



Dukungan baru untuk internasionalisasi dan lokalisasi



Fungsionalitas inti yang Anda perlukan untuk menginternasionalkan (i18n) dan melokalkan (l10n) aplikasi Anda tersedia di Flutter sejak awal. Dalam rilis ini, kami telah menambahkan dukungan Hot reload untuk memperbarui aplikasi Anda saat informasi l10n baru ditambahkan.







Jika Anda memerlukan informasi lebih lanjut tentang dukungan Flutter l10n, termasuk pesan yang dilokalkan, pesan dengan parameter, tanggal, angka, dan mata uang, baca Panduan Pengguna Internasionalisasi Flutter .



Selain itu, jika Anda tertarik dengan i18n dan l10n, Anda mungkin perlu menggunakan string dengan karakter yang tidak sesuai dengan ASCII lama biasa - seperti Unicode dan emoji. Tim Dart baru-baru ini merilis paket karakteryang membantu pengembang bekerja dengan cluster grafem Unicode (ditingkatkan). Paket ini membantu memecahkan masalah seperti cara mempersingkat string dengan benar seperti "Teks [emoji bendera Inggris] dalam bahasa Inggris" menjadi 15 karakter pertama. Menggunakan kelas String, singkatan ini akan menjadi "A teks [emoji bendera Inggris] dalam", yang hanya 12 karakter yang dapat dibaca oleh pengguna. Di sisi lain, menggunakan paket charactersmemberikan singkatan yang benar "A [British flag emoji] text in Eng".



Dengan PR ini, Flutter menggunakan paket karakter untuk menangani karakter kompleks ini dengan benar. Misalnya, saat digunakan TextFielddengan batasan maxLength, karakter seperti ‍‍ [keluarga tiga emoji] sekarang dihitung dengan benar sebagai satu karakter. Juga, dengan PR inipaket simbol secara otomatis tersedia di proyek Flutter, tanpa perlu menambahkannya secara manual. Mudah-mudahan ini mempermudah bekerja dengan string dari semua jenis dari semua lokal. Untuk mempelajari lebih lanjut tentang paket simbol, lihat artikel yang sangat bagus " Manipulasi String yang Tepat dalam Dart ".



Plugin Google Maps dan WebView dapat digunakan dalam aplikasi produksi



Di tim Flutter, kami sering kali khawatir untuk memberi label pada sesuatu sebagai "siap produksi" hingga kami mengujinya sendiri. Dalam kasus google_maps_flutter dan webview_flutter plugin, yang alasan utama penundaan itu dalam mendasari platform Tampilan implementasi , yang memungkinkan Anda untuk host komponen UI asli Android dan iOS dalam aplikasi Flutter. Dalam rilis Flutter kali ini, kami dengan senang hati mengumumkan bahwa kami telah meningkatkan infrastruktur untuk menyatakan bahwa kedua plugin ini siap digunakan.





webview_flutter plugin menampilkan flutter.dev



Di Flutter 1.22, kami menambahkan implementasi Tampilan Platform alternatif yang menghapus semuamasalah keyboard dan masalah aksesibilitas di Android Views . Ini berfungsi dengan Android API level 19 dan lebih tinggi (sebelumnya diperlukan level 20). Kami juga telah melakukan perbaikan pada aliran iOS yang membuat tampilan platform lebih efisien dan dapat diandalkan (dan tidak lagi memerlukan tanda io.flutter.embedded_views_previewuntuk ditambahkan ke iOS Anda Info.plist).



Plugin webview_fluttermendukung mode Tampilan Platform Android baru, tetapi saat ini harus diaktifkan secara manual . Saat ini semakin meluas di komunitas, kami akan mengaktifkannya secara default.



Plugin Google Maps dan WebView telah mendapatkan keuntungan dari peningkatan Tampilan Platform.



Jika Anda ingin menggunakan Tampilan Platform untuk menghosting elemen UI khusus di iOS dan Android, baca lebih lanjuttampilan asli Android dan iOS di aplikasi Flutter .



Komentar



Peristiwa menyenangkan lainnya yang tidak membawa perubahan revolusioner apa pun pada kehidupan pengembang. Kami telah menggunakan kedua plugin ini dalam produksi untuk waktu yang lama dan tidak ada masalah. Kami berharap memasuki tahap "produksi siap" tidak akan mengubah situasi ini. Kami akan jauh lebih senang melihat plug-in resmi untuk dukungan Yandex MapKit. Sampai itu terjadi, yang tersisa hanyalah menggunakan solusi pihak ketiga .




Navigator 2.0



Jika Anda pernah menggunakan navigasi di aplikasi Flutter sebelumnya , Anda mungkin memperhatikan bahwa struktur data utama, tumpukan halaman yang dinavigasi pengguna, tersembunyi dari Anda. Sebaliknya, untuk mengontrolnya, Anda menelepon Navigator.pop()atau Navigator.push(). 



Misalkan Anda ingin menampilkan daftar widget di halaman beranda dan mengizinkan pengguna untuk mengklik salah satunya untuk membuka halaman detail warna tertentu.







Dua layar dapat diimplementasikan seperti ini: 



class ColorListScreen extends StatelessWidget {
 final List<Color> colors;
 final void Function(Color color) onTapped;
 ColorListScreen({this.colors, this.onTapped});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Colors')),
       body: Column(
         children: [
           // you can see and decide on every color in this list
           for (final color in colors)
             Expanded(
               child: GestureDetector(
                 child: Container(color: color),
                 onTap: () => onTapped(color),
               ),
             )
         ],
       ),
     );
}
 
class ColorScreen extends StatelessWidget {
 final Color color;
 const ColorScreen({this.color});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Color')),
       body: Container(color: color),
     );
}


Menggunakan gaya Navigator 1.0 yang paling sederhana memungkinkan Anda untuk menavigasi di antara dua layar. Ini terlihat sangat mudah: 



class _ColorAppState extends State<ColorApp> {
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Builder(
         builder: (context) => ColorListScreen(
           colors: _colors,
           // the Navigator manages the list of pages itself; you can only push and pop
           onTapped: (color) => Navigator.push(
             context,
             MaterialPageRoute(builder: (context) => ColorScreen(color: color)),
           ),
         ),
       ),
     );
}


Hanya diperlukan panggilan Navigator.push()untuk menempatkan halaman lain di atas yang pertama, membuat tumpukan dua halaman. Namun, tidak seperti daftar penampung yang dibuat dalam metode build ColorListScreen, tumpukan ini disembunyikan dari Anda. Dan karena tersembunyi, sulit untuk mengelola dalam skenario lain, seperti menangani tautan dalam rute awal yang disediakan, misalnya, dengan penyematan asli, atau URL dari internet atau maksud dari Android. Juga sangat sulit untuk mengelola perutean bersarang antara struktur berbeda pada halaman yang sama.



Navigator 2.0 mengatasi masalah ini dan masalah lainnya dengan membuat tumpukan halaman terlihat. Berikut adalah contoh terbaru dari transisi antara yang sama ColorListScreendan ColorScreen: 



class _ColorAppState extends State<ColorApp> {
 Color _selectedColor;
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Navigator(
           // you can see and decide on every page in this list
         pages: [
           MaterialPage(
             child: ColorListScreen(
               colors: _colors,
               onTapped: (color) => setState(() => _selectedColor = color),
             ),
           ),
           if (_selectedColor != null) MaterialPage(child: ColorScreen(color: _selectedColor)),
         ],
         onPopPage: (route, result) {
           if (!route.didPop(result)) return false;
           setState(() => _selectedColor = null);
           return true;
         },
       ),
     );
}


Aplikasi secara eksplisit membuat Navigatordan menyediakannya daftar halaman yang mewakili tumpukan lengkap. Kami membuat kosong _selectedColoruntuk menunjukkan bahwa warna belum dipilih, jadi awalnya kami tidak menampilkannya ColorScreen. Saat pengguna memilih warna, kami memanggil setState()seperti biasa untuk memberi tahu Flutter bahwa Anda ingin memanggil metode lagi build(), yang sekarang membuat tumpukan di bagian ColorScreenatas.



Anda memperbarui status Anda di callback OnPopPage: misalnya, jika pengguna kembali ke layar, itu berarti mereka "tidak memilih" warna saat ini dan kami tidak ingin lagi menampilkan halaman ini.



Jika Navigator 2.0 terlihat seperti Flutter lainnya, ini disengaja: ini bersifat deklaratif, bukan Navigator 1.0 yang penting. Idenya adalah untuk menggabungkan model navigasi dan Flutter lainnya sambil memperbaiki banyak bug dan menambahkan fitur pada saat yang bersamaan. Faktanya, contoh kecil ini hanya menggores permukaan dari apa yang ada di Navigator 2.0. Untuk detailnya, saya sangat merekomendasikan artikel tentang Navigasi Deklaratif dan Perutean di Flutter .



Anda dapat terus menggunakan Navigator 1.0: ini akan bekerja sama seperti sebelumnya. Kami tidak akan menghapusnya dalam waktu dekat. Namun, menurut kami jika Anda mencoba Navigator 2.0, Anda akan menyukainya.







. , . , , , , . .



, . — Flutter. Navigator 2.0 . Remi Rousselet Twitter, . , . — Surf. , , GitHub: , , , .







: Android



Fitur baru yang dapat Anda coba dalam rilis ini adalah dukungan untuk pemulihan status di Android . Ini adalah salah satu fitur kami yang paling didambakan dengan 217 ulasan!



Bagi mereka yang tidak terbiasa dengan kebutuhan untuk memulihkan status, sistem operasi seluler dapat "mematikan" aplikasi yang ada di latar belakang untuk membebaskan sumber daya untuk aplikasi prioritas. Jika ini terjadi, OS memberi tahu aplikasi bahwa ia akan "mematikan": aplikasi dengan cepat menyimpan status UI untuk memulihkannya saat pengguna kembali ke aplikasi. 



Jika diterapkan dengan benar, pengalaman pengguna menjadi mulus dan sumber daya perangkat digunakan dengan lebih efisien. Hingga saat ini, Flutter tidak mendukung pemulihan status, dan tanpa dukungan kerangka kerja, sangat sulit untuk melakukannya dengan benar. Oleh karena itu, dengan senang hati kami menyediakan implementasi dasar fitur ini untuk Android.



Berikut adalah contoh yang sangat sederhana untuk memulihkan status aplikasi Flutter Counter default: 



class CounterState extends State<RestorableCounter> with RestorationMixin {
  @override
  String get restorationId => widget.restorationId;

  RestorableInt _counter = RestorableInt(0);

  @override
  void restoreState(RestorationBucket oldBucket) => registerForRestoration(_counter, 'count');

  void _incrementCounter() => setState(() => _counter.value++);

  @override
  Widget build(BuildContext context) => Scaffold(
      body: Center(child: Text('${_counter.value}')),
      floatingActionButton: FloatingActionButton(onPressed: _incrementCounter),
    );
}


Singkatnya, setiap widget mendapatkan segmen penyimpanan yang terdaftar dengan RestorationMixin menggunakan pengenal unik. Dengan menggunakan RestorableProperty ( RestorableIntseperti yang ada di sini) untuk menyimpan data khusus UI, dan mendaftarkan data tersebut dengan fungsi pemulihan status, data secara otomatis disimpan sebelum Android keluar dari aplikasi, dan dipulihkan ketika kembali aktif. Dan itu semua. Semua data yang disimpan dalam satu tipe Restoration*, misalnya RestorableInt, RestorableStringdan RestorableTextEditingController(kami memiliki beberapa di antaranya), akan dipulihkan. Dan jika kami belum mencakup semua jenis yang ingin Anda pulihkan, Anda dapat membuatnya sendiri dengan meluaskanRestorableProperty.



Untuk menguji pemulihan status secara otomatis, kami menambahkan API restartAndRestore baru ke WidgetTester . Dan untuk pengujian manual, yang paling mudah adalah:



  • jalankan aplikasi Flutter dengan pemulihan status diaktifkan di perangkat Android, 

  • aktifkan opsi "Jangan simpan tindakan" di setelan pengembang Android, 

  • luncurkan aplikasi Flutter, 

  • letakkan di latar belakang,

  • kembali ke sana. 



Android akan "mematikan" dan memulihkan aplikasi Anda, dan Anda akan melihat apakah semuanya bekerja seperti yang Anda harapkan.







Versi pemulihan negara ini adalah pendahuluan: masih ada yang harus dilakukan. Misalnya, pemulihan status bukan hanya fitur untuk Android, aplikasi iOS juga dapat memanfaatkannya. Kami juga sibuk memperbarui widget kami sendiri untuk mempertahankan statusnya selama pemulihan. Kami telah membuat dukungan untuk kelas Scrollableseperti ListViewdan SingleChildScrollView(untuk mengingat posisi pengguliran pengguna) dan TextFields(untuk memulihkan teks yang dimasukkan), dan kami berencana untuk memperluasnya ke widget lain.



Benar, kami belum menambahkan fitur utama - dukungan navigasi (1.0 atau 2.0), itulah sebabnya kami menyebut versi ini "pendahuluan". Artinya, aplikasi tidak akan terbuka di tempat yang sama dimana pengguna berada. Fitur ini akan segera hadir dalam versi beta dan dalam rilis stabil Flutter berikutnya.







— . Flutter- UX. — , (, — -), State . Restorable-, RestorationMixin.



, . : , - , , .





:



Bekerja sama dengan mitra internal kami di Google, tim Flutter telah membuat peningkatan yang signifikan dalam kinerja pengguliran saat rasio masukan dan tampilan tidak cocok. Misalnya, input Pixel 4 beroperasi pada 120Hz, dan layar beroperasi pada 90Hz. Ketidakkonsistenan ini dapat menyebabkan kinerja pengguliran yang buruk. Dengan bendera baru, resamplingEnabledAnda dapat mengatasi masalah ini: 



void main() {
  GestureBinding.instance.resamplingEnabled = true;
  run(MyApp());
}


Bergantung pada perbedaan frekuensi yang dipermasalahkan, Anda dapat melihat hingga 97% lebih sedikit latensi pengguliran jika Anda mengaktifkan tanda ini. Di build mendatang, kami berencana untuk mengaktifkan flag ini secara default.



Alat pengembang Dart terpadu yang baru



Seperti biasa, pembaruan Flutter tidak hanya menyangkut mesin dan kerangka kerja, tetapi juga alatnya. Flutter 1.22 menyertakan versi baru Dart (2.10) serta alat baris perintah baru dartyang mungkin berguna juga bagi Anda.



Secara historis, Dart memiliki banyak alat pengembang kecil (seperti dartfmtpemformatan dan dartanalyzeranalisis kode). Dart 2.10 memiliki alat pengembangan terpadu yang dartsangat mirip dengan alat tersebut flutter.







Dimulai dengan Flutter 1.22 SDK, folder <flutter-sdk>/bin(yang mungkin Anda miliki PATH) berisi flutterdan perintah dart. Untuk informasi lebih lanjut, lihat posting blog Dart 2.10 .



Alat analisis ukuran aplikasi



Alat yang dirilis sebagai bagian dari Flutter 1.22 menyertakan utilitas analisis ukuran build baru. Alat ini membantu Anda mendiagnosis jika ukuran aplikasi Anda membengkak dari waktu ke waktu.



Anda dapat menggunakan alat ini untuk mengumpulkan data untuk analisis. Teruskan bendera dengan --analysis-sizesalah satu perintah berikut:



  • flutter build apk

  • flutter build appbundle

  • flutter build ios

  • flutter build linux

  • flutter build macos

  • flutter build windows



Menggunakan tanda ini saat membuat artefak keluaran Flutter memberikan ringkasan ukuran dan komposisi artefak tersebut. Ini mencakup kode asli, sumber daya, dan bahkan perincian tingkat paket dari kode Dart yang dikompilasi.





Perincian Galeri Flutter APK Rilis Sampel



Ringkasan ini berguna untuk menganalisis ukuran build dengan cepat dan memahami mengapa build terlalu besar. Selain itu, data yang dikumpulkan juga tersedia sebagai file JSON yang dapat dilihat di Dart DevTools, yang memungkinkan Anda memeriksa lebih lanjut konten aplikasi, mengidentifikasi masalah ukuran, dan melihat perubahan antara dua file JSON yang berbeda dengan mengikuti petunjuk di flutter.dev . Setelah mengunggah file JSON, Anda akan memiliki antarmuka yang menampilkan peta hierarki ukuran aplikasi Anda.





Contoh pengelompokan APK di Dart DevTools



Documentation untuk Application Size Analysis Tool di flutter.dev



Komentar



Apa yang telah lama dapat dilakukan Android Studio sendiri sekarang dapat dianalisis melalui Dev Tools. Ini bahkan lebih fleksibel. Sekarang Anda dapat menerapkan laporan di Json langsung ke CI dan memantau perubahan ukuran perakitan dari waktu ke waktu.



Pratinjau: Halaman Jaringan yang Diperbarui di DevTools



Fitur awal lainnya dari DevTools dalam rilis ini: isi permintaan sekarang ditampilkan di tab Jaringan .







Untuk mengaktifkan fitur ini, pastikan Anda berada di saluran dev Flutter melalui flutter channel devdan flutter channel upgrade.



Selain itu, untuk aplikasi dengan volume lalu lintas jaringan yang besar, kami telah menyediakan kemampuan untuk mencari dan memfilter.







Untuk dokumentasi pada tab Jaringan, lihat bagian Menggunakan Tampilan Jaringan di flutter.dev .



Tab DevTools Inspector yang Di-host di IntelliJ



Untuk beberapa waktu sekarang kami telah mempertahankan dua salinan dari beberapa alat Flutter kami: misalnya, panel Inspektur di IntelliJ dan tab Inspektur di Dart DevTools. Ini memperlambat pekerjaan kami: kami perlu mempertahankan dua basis kode. Selain itu, beberapa fitur belum menjadi bagian dari plugin IntelliJ - misalnya, Layout Explorer. Untuk mengatasi masalah ini, kami telah mengaktifkan kemampuan untuk menghosting tab Inspector dari Dart DevTools langsung di dalam IntelliJ.







Untuk mengaktifkan opsi ini, buka Preferences > Languages ​​& Frameworks > Flutter > Enable embedded DevTools inspector .







, . Flutter Dev Podcast Android Studio VS Code.



, … . , IDE. . , Android Studio. .



Visual Studio Code



Tindakan umum yang dihadapi semua pengembang Flutter adalah berpindah dari jejak tumpukan kesalahan di terminal ke lokasi di kode sumber tempat kesalahan terjadi. Dalam rilis terbaru ekstensi Flutter untuk Visual Studio Code, tautan ini sekarang diurai dengan benar: Anda dapat mengkliknya dan pergi ke tempat yang diinginkan dalam kode di mana kerusakan terjadi.







Kedengarannya seperti hal kecil, tetapi masukan awal tentang fitur ini sudah sangat positif.



Seperti biasa, ada terlalu banyak log perubahan alat di sini, tetapi saya sarankan untuk memeriksa pengumuman berikut:





Fokus pelanggan: Easy



EasyA adalah aplikasi berbasis langganan tempat siswa belajar dengan tutor yang brilian melalui pesan instan. Aplikasi ini ditulis dalam Flutter. Apple baru-baru ini menandainya sebagai App of the Day .







“Saat sekolah mulai beralih ke pembelajaran jarak jauh di awal tahun ini, kami mendapat tugas untuk segera meluncurkan aplikasi untuk membantu siswa. Berkat kecepatan pengembangan yang tinggi di Flutter, kami dapat membuat aplikasi untuk iOS dan Android. Dan mereka berhasil menerbitkannya di toko-toko - tepat pada saat dimulainya penguncian! Dalam keadaan normal, ini praktis tidak mungkin. Namun karena Flutter memungkinkan kami bekerja dengan ketiga platform secara bersamaan, kami dapat menggunakan kembali kode secara efektif. Tim pengembangan kecil kami bekerja keras. "



Phil Kwok, salah satu pendiri EasyA



Perubahan yang merusak



Seperti biasa, kami berusaha meminimalkan jumlah perubahan yang melanggar. Berikut adalah daftar dari Flutter 1.22:



  • 56413 Cegah viewport.showOnScreen menggulir viewport jika Rect yang ditentukan sudah ditampilkan .

  • 62395 [gen_l10n] Pembuatan paket sintetis default.

  • 62588 Bangun lebih sedikit rute.



    • Versi stabil Flutter 1.22 mungkin telah keluar dengan sangat cepat setelah rilis 1.20, tetapi ada begitu banyak hal baik di dalamnya sehingga kami tidak dapat menyebutkan semuanya di sini. Kami berharap rilis ini membantu Anda membuat aplikasi iOS dan Android yang keren, dan kami tidak sabar untuk melihat apa yang akan hadir di Store! Terima kasih atas dukungan Anda: kami membuat Flutter untuk Anda.


More articles:


All Articles