Halo semuanya, saya Evgeny Saturov dari Surf. Saya menyajikan terjemahan artikel resmi tentang pembaruan Flutter 1.20 terbaru dengan komentar saya. Kerangka kerja menjadi semakin dipoles dengan setiap rilis baru, dan hari ini kita akan melihat apa yang dibawa oleh saluran stabil pada akhir musim panas.
Dengan setiap rilis baru, kami berusaha untuk membuat Flutter lebih cepat, lebih menyenangkan secara estetika, dan lebih produktif, dan untuk memastikan bahwa Flutter tersedia untuk setiap platform yang didukung. Dalam versi 1.20, yang, pada saat artikel ini dirilis, sudah ada di saluran stabil kami, Flutter telah meningkatkan setiap kriteria ini.
Berbicara tentang performa , kami berhasil meningkatkan performa baik di level terendah mesin rendering maupun dalam bahasa Dart itu sendiri.
Untuk membuat aplikasi Flutter menjadi lebih estetis, kami telah menambahkan beberapa peningkatan UI pada rilis ini, termasuk dukungan pelengkapan otomatis yang telah lama ditunggu, cara baru untuk memindahkan dan menskalakan widget, dukungan kursor mouse, favorit materi yang diperbarui (seperti widget pemetik tanggal dan waktu), dan menambahkan halaman responsif baru dengan lisensi untuk jendela Tentang, untuk aplikasi Flutter desktop dan seluler.
Untuk membantu Anda menjadi lebih produktif , kami telah memperbarui ekstensi Flutter untuk Visual Studio Code :
- memungkinkan Anda untuk menggunakan Dart DevTools langsung di IDE Anda;
- sekarang Anda dapat memindahkan file di sekitar proyek, dan impor akan diperbarui secara otomatis;
- satu set metadata baru telah ditambahkan sehingga Anda dapat menulis alat Anda sendiri.
Berkat keterbukaan Flutter dan komunitas Flutter yang luar biasa, rilis ini mencakup 3.029 permintaan penarikan yang bocor dan 5.485 masalah tertutup dari 359 kontributor dari seluruh dunia, termasuk 270 kontributor dari komunitas Flutter. Terlebih lagi, ini adalah rekor jumlah kontributor yang kami miliki saat rilis berikutnya. Kami ingin mengucapkan terima kasih khusus kepada kontributor CareF untuk 28 permintaan penarikan, AyushBherwani1998 untuk 26 (termasuk 10 sampel dari Google Summer of Code), dan a14nuntuk 13 permintaan tarik, banyak di antaranya kami adopsi saat mengerjakan keamanan nol di Flutter (kami akan menulis lebih banyak tentang ini segera). Kami tidak dapat membuat Flutter tanpa dukungan komunitas yang besar ini. Terima kasih atas masukan Anda!
Dengan setiap rilis baru Flutter, kami melihat jumlah pengguna berkembang pesat. Di bulan April saja, kami menulis bahwa jumlah aplikasi Flutter di Google Play mencapai 50 ribu. Selama periode puncak, pertumbuhannya mencapai 10 ribu aplikasi baru per bulan. Sekarang, hanya dalam tiga bulan, lebih dari 90 ribu telah diterbitkan di Google Play.
Aplikasi Flutter. Kami melihat pertumbuhan terbesar di India, yang telah menjadi wilayah nomor satu bagi pengembang Flutter. Selama enam bulan terakhir, jumlah mereka berlipat ganda, yang merupakan konsekuensi langsung darimeningkatkan investasi Google di wilayah tersebut. Akhirnya, Flutter tidak akan menjadi Flutter jika bukan karena Dart. Sangat menyenangkan melihat Dart berada di peringkat ke-12 dalam 50 bahasa pemrograman teratas oleh majalah IEEE Spectrum , naik empat tempat dari tahun lalu.
Peningkatan kinerja untuk Flutter dan Dart
Kami di Flutter selalu mencari cara baru untuk mengurangi ukuran dan mempercepat aplikasi Anda. Misalnya, dalam rilis ini, kami memperbaiki masalah kinerja dengan penghapusan ikon font saat pohon bergetar , dan juga mengaktifkan perilaku ini secara default saat membuat aplikasi non-web. Perbaikan yang disebutkan di atas menghasilkan penghapusan font yang tidak digunakan, mengurangi ukurannya. Kami mengujinya di aplikasi Flutter Gallery - ukurannya diperkecil 100KB . Ini sekarang menjadi perilaku default untuk build rilis. Untuk saat ini, ini hanya berfungsi dengan Font TrueType, tetapi batasan ini akan dihapus di rilis mendatang.
Peningkatan kinerja lainnya adalah untuk mengurangi ketidakjelasan animasi pada tampilan pertama melalui fase pemanasan. Lihat bagaimana kehalusan animasi telah meningkat (perekaman diperlambat dua kali untuk kejelasan).
Perbandingan animasi sebelum dan sesudah pengenalan pemanasan SkSL
Jika aplikasi Flutter menampilkan animasi compang-camping selama peluncuran pertama, hal ini dapat diperbaiki menggunakan Skia Shading Language. Saat melakukan pra-kompilasi pada tahap membangun aplikasi, dapat mempercepat animasi lebih dari 2 kali lipat. Jika Anda ingin memanfaatkan fungsi ini, buka halaman pemanasan SkSL di flutter.dev.
, Flutter- . ? - Flutter - . 1.20 . , , .
-, Apple (, ) — - Metal. OpenGL.
-, . , flutter build. , . , .
Terakhir, saat kami mengoptimalkan untuk desktop, kami terus mengerjakan dukungan mouse. Dalam rilis ini, kami telah mengerjakan ulang sistem pengujian klik mouse untuk memberikan sejumlah manfaat arsitektural yang tidak tersedia karena masalah kinerja. Pemfaktoran ulang ini telah menghasilkan peningkatan kinerja 15x lipat di mikrobenchmark web kami: Pengguna akan mendapatkan pemeriksa klik yang lebih baik, lebih konsisten, dan lebih akurat tanpa mengorbankan kinerja.
Selain pengujian klik yang ditingkatkan, kami telah menambahkan dukungan untuk kursor mouse, salah satu fitur yang paling banyak diminta untuk komputer desktop. Beberapa widget yang lebih umum digunakan akan menampilkan kursor yang Anda harapkan secara default. Atau Anda dapat memilih yang lain dari daftar kursor yang didukung.
- Flutter for Web . 1.20, . , .
Kursor mouse baru dalam widget di Android
Versi Flutter ini didasarkan pada Dart 2.9 dan menyertakan dekoder UTF-8 dua lintasan baru. Ini berbasis negara dan berisi decoding primitif yang dioptimalkan di mesin virtual Dart dan sebagian memanfaatkan instruksi SIMD.
UTF-8 adalah metode pengkodean karakter paling umum di Internet. Kemampuan untuk memecahkan kode dengan cepat memainkan peran penting dalam mendapatkan respons jaringan yang besar. Dalam tolok ukur dekode UTF-8, kami melihat peningkatan di seluruh bagian. Peningkatan kecepatan hampir 200% untuk bahasa Inggris dan hingga 400% untuk teks bahasa Mandarin pada perangkat ARM berkinerja rendah.
Pelengkapan otomatis untuk aplikasi Flutter
Dukungan untuk bidang teks pelengkapan otomatis di aplikasi Flutter di Android dan iOS telah lama menjadi salah satu fitur yang paling didambakan. Kami dengan senang hati mengumumkan bahwa setelah permintaan penarikan 52126 , Anda tidak perlu lagi meminta pengguna Anda untuk memasukkan kembali data yang telah dikumpulkan oleh sistem operasi untuk mereka.
Pelengkapan otomatis beraksi
Selain itu, kami sudah mulai mengadaptasi fungsi ini untuk web.
Widget baru untuk tindakan template
Dalam rilis ini kami telah menambahkan widget baru - InteractiveViewer. InteractiveViewer dirancang untuk mengimplementasikan tindakan template dalam aplikasi Anda, seperti menggeser, menskalakan, dan menyeret 'n' drop, yang berfungsi bahkan saat ukurannya diubah. Begini cara kerja widget ini untuk contoh papan di Go .
Scaling, panning, resizing, drag 'n' drop dengan InteractiveViewer
Untuk mengintegrasikan InteractiveViewer ke dalam aplikasi Anda, lihat dokumentasi API . Anda juga dapat mencobanya dengan beraksi di DartPad. Jika Anda tertarik untuk mempelajari lebih lanjut tentang mengembangkan InteractiveViewer, lihat presentasi ini di saluran YouTube Chicago Flutter .
Di versi baru, kami juga menambahkanlebih banyak pilihan untuk drag 'n' drop . Misalnya, jika Anda perlu tahu persis di mana penurunan terjadi pada widget target (opsi ini sebelumnya hanya tersedia untuk objek Draggable ), sekarang Anda bisa mendapatkan data ini menggunakan metode DragTarget onAcceptDetails .
onAcceptDetails beraksi
Lihat contoh ini untuk mempelajari lebih lanjut tentang fitur ini. Di versi Flutter berikutnya, informasi ini juga akan tersedia selama seret dan lepas, yang memungkinkan DragTarget memperbarui status visualnya secara tepat waktu.
InteractiveViewer , , . , : — Justin McCandless. , Flutter. Justin ChicagoFlutter , Transform GestureDetector InteractiveViewer, .
Material- Slider, RangeSlider, TimePicker DatePicker
Bersama dengan widget baru, rilis ini berisi sejumlah widget yang diperbarui sejalan dengan prinsip desain Material baru . Khususnya Slider dan RangeSlider. Untuk informasi lebih lanjut, lihat Apa yang baru dengan widget Slider? ...
Material Slider
Diperbarui Rentang Material yang DiperbaruiSlider
DatePicker memiliki desain kompak baru dan dukungan untuk rentang tanggal.
Memperbarui DatePicker
Akhirnya, kami telah sepenuhnya mendesain ulang TimePicker.
Memperbarui TimePicker
Anda dapat menguji TimePicker baru di demo Flutter ini .
Halaman lisensi responsif
Kami telah membuat halaman lisensi responsif baru yang tersedia di AboutDialog.
Halaman baru dengan lisensi
Permintaan Tarik 57588 dari kontributor TonicArtos telah diperbarui sesuai dengan prinsip desain Material. Ini tidak hanya membuat widget lebih indah, tetapi juga navigasi yang lebih baik: sekarang lebih nyaman untuk digunakan di tablet, desktop dan smartphone. Terima kasih TonicArtos Mengingat setiap aplikasi Flutter harus menunjukkan lisensi untuk paket yang digunakannya, Anda telah membuat semua aplikasi Flutter menjadi lebih baik!
Format pubspec.yaml baru untuk plugin penerbitan
Tentu saja, Flutter bukan hanya tentang widget. Mereka juga merupakan alat. Ada terlalu banyak pembaruan dalam rilis ini, jadi mari kita bicara tentang yang paling penting.
Mari kita mulai dengan pengumuman untuk pembuat plugin Flutter: format pubspec.yaml lama tidak lagi didukung saat menerbitkan plugin. Jika Anda mencoba menggunakannya, Anda akan mendapatkan error saat menjalankan pub publish.
Terjadi kesalahan saat menerbitkan plugin dalam format pubspec usang.
Format lama tidak mendukung penentuan platform tempat plugin Anda dijalankan. Sudah tidak digunakan lagi sejak Flutter 1.12. Format pubspec.yaml baru sekarang diperlukan untuk menerbitkan plugin baru atau yang diperbarui .
Pengguna plugin masih dapat menggunakan format pubspec lama. Semua plugin yang ada di pub.dev yang menggunakan pubspec.yaml yang sudah tidak digunakan lagi akan terus berfungsi dengan aplikasi Flutter di masa mendatang.
Pratinjau built-in Dart DevTools dalam Visual Studio Code
Pembaruan perkakas terbesar dalam rilis ini adalah untuk Visual Studio Code, dengan pratinjau fitur baru yang membawa Dart DevTools langsung ke ruang pengembangan.
Pratinjau Penjelajah Tata Letak dalam Kode Visual Studio
Aktifkan fitur ini dengan pengaturan dart.previewEmbeddedDevTools baru . Tangkapan layar di atas menunjukkan Flutter Widget Inspector yang dibangun ke dalam Visual Studio Code. Dengan pengaturan ini, Anda dapat menetapkan halaman Favorit di menu Dart DevTools yang terletak di bilah status.
Dengan menu ini Anda dapat memilih halaman mana yang akan ditampilkan.
Fitur ini masih dalam pratinjau. Hubungi kami jika Anda mengalami masalah
— , , , Flutter-, VS Code ! , — -. , - , — . : VS Code. Android Studio .
Versi terbaru Dart DevTools hadir dengan versi terbaru dari utilitas Jaringan yang memungkinkan Anda untuk membuat profil permintaan web.
Durasi
Halaman Jaringan Dart DevTools, Status dan Jenis Isi Sambungan Soket Halaman Jaringan sekarang menambahkan informasi waktu ke panggilan jaringan dari aplikasi Anda - bersama dengan data lain seperti status dan jenis konten. Perbaikan tambahan telah dilakukan pada antarmuka detail permintaan, yang sekarang menampilkan data dari soket web atau permintaan http. Kami memiliki lebih banyak rencana untuk halaman ini, misalnya, kami ingin menambahkan tampilan isi permintaan dan respons HTTP, serta memantau lalu lintas gRPC.
Memperbarui impor saat mengganti nama file
Fitur baru lainnya dari Visual Studio Code adalah impor diperbarui saat memindahkan atau mengganti nama file.
Memperbarui file Dart saat bergerak
Fitur ini saat ini hanya berfungsi untuk file individual, tetapi segera kami akan menambahkan dukungan untuk beberapa file atau folder.
Komentar
Android Studio, jika saya jadi Anda, saya akan sangat khawatir. Salah satu fitur paling halus, tetapi sangat penting dari IDE tercinta Anda sekarang ada di VS Code. Sekarang Anda dapat mengganti nama file sebanyak yang Anda suka! Anda tidak perlu menyesuaikan semua impor secara manual (ya, saya tahu kita semua telah melalui ini). Oh, berapa jam kerja pembaruan plugin VS Code menyelamatkan kami. Akan menarik untuk mengetahui fitur refactoring lanjutan apa yang Anda gunakan di VS Code? Tulis di komentar.
Metadata alat
Pembaruan lainnya adalah untuk orang yang membuat alat Flutter. Kami membuat proyek baru di GitHub: di sana kami akan mengumpulkan dan menerbitkan metadata tentang kerangka itu sendiri. Di dalamnya Anda akan menemukan file yang dapat dibaca mesin yang berisi data ini:
- direktori dari semua widget Flutter saat ini (395 buah!),
- mencocokkan nama warna di Flutter dengan nilai warna untuk kumpulan warna Material dan Cupertino,
- Metadata ikon untuk ikon Material dan Cupertino, termasuk nama ikon dan ikon pratinjau.
Ini adalah metadata yang kami sendiri gunakan untuk ekstensi Android Studio / IntelliJ dan VS Code. Kami pikir mereka mungkin berguna saat membuat alat baru. Di aplikasi keluarga IntelliJ, metadata ini memungkinkan Anda mengaktifkan tampilan warna yang digunakan dalam kode Flutter Anda.
Terkait dengan ini adalah fitur baru di IntelliJ dan Android Studio yang membuat blok warna untuk Color.fromARGB () dan Color.fromRGBO ().
Kami ingin mengucapkan terima kasih khusus kepada dratushnyy di GitHub karena berkontribusi dalam meningkatkan pratinjau warna di IntelliJ!
Saluran platform yang aman untuk komunikasi lintas platform
Menanggapi permintaan populer dari pembuat plugin, kami memutuskan untuk bereksperimen dengan cara membuat komunikasi antara Flutter dan platform lebih aman dan lebih mudah untuk plugin dan Add-to-App . Untuk melakukan ini, kami membuat Pigeon , alat baris perintah yang menggunakan sintaks Dart untuk menghasilkan kode tipe aman di atas pipa platform tanpa ketergantungan waktu proses tambahan. Pigeon memungkinkan Anda memanggil metode Java / Objective-C / Kotlin / Swift dan meneruskan objek non-primitif dengan langsung memanggil metode Dart (dan sebaliknya) alih-alih mencocokkan nama metode secara manual di pipa platform dan argumen serialisasi.
Terlepas dari kenyataan bahwa Pigeon masih dalam status pra-rilis, itu telah cukup berkembang sehingga kami dapat menggunakannya di plugin video_player kami . Jika Anda tertarik untuk mencoba Pigeon pada proyek Anda, lihat dokumentasi saluran platform yang diperbarui dan contoh ini .
Pigeon. , . Mobius GDG DevParty, Flutter- . «» , . -. Pigeon — .
Selama persiapan Flutter 1.20, alat telah menerima begitu banyak pembaruan hebat sehingga kami tidak dapat mencantumkan semuanya di sini. Meskipun demikian, Anda pasti tertarik untuk melihatnya:
- Ekstensi VS Code v3.13
- Ekstensi VS Code v3.12
- Ekstensi VS Code v3.11
- Flutter IntelliJ Plugin M46 Rilis
- Flutter IntelliJ Plugin M47 Rilis
- Flutter IntelliJ Plugin M48 Rilis
- Alat bawaan baru untuk pengembang Flutter
Perubahan yang merusak
Seperti biasa, kami mencoba untuk meminimalkan perubahan. Berikut adalah daftar perubahan tersebut di Flutter 1.20.
- 55336 Menambahkan tabSemanticsLabel ke CupertinoLocalizations - Panduan migrasi PR
- 55977 Tambahkan clipBehavior ke widget dengan clipRect
- 55998 Memperbaiki pembaruan halaman navigator crash ketika masih ada rute wa ...
- 56582 Perbarui semantik Tab di Cupertino agar sama dengan Material
- 57065 Hapus parameter turunan yang tidak digunakan lagi untuk sliver pengelolaan tumpang tindih NestedScrollView
- 58392 indikator aktivitas seret tengah iOS
Ringkasan
Ini adalah rilis Flutter terbesar. Pada artikel ini, kami hanya membahas alat yang paling signifikan dan peningkatan kinerja dan berbicara tentang widget paling menarik, baru dan diperbarui.
Kami berencana menambahkan dukungan untuk keamanan nol (lihat artikel mendetail Bob Nystrom Memahami keamanan nol ), merilis versi baru plugin Ads, Maps dan WebView, dan memperluas dukungan alat.
Bagaimana Anda akan menerapkan fitur Flutter baru ke proyek Anda?