Clever Geek Handbook

フラッター1.20アナウンス

パフォーマンスの向上、自動完了、新しいウィジェットなど！



みなさん、こんにちは。SurfのEvgenySaturovです。最新のFlutter1.20アップデートに関する公式記事の翻訳をコメントとともに提示します。新しいリリースごとにフレームワークはますます洗練されてきます。今日は、安定したチャネルが夏の終わりに私たちにもたらしたものを見ていきます。







新しいリリースごとに、Flutterをより速く、より美しく、より生産的にし、サポートされているすべてのプラットフォームで確実に利用できるように努めています。この記事のリリースの時点ですでに安定したチャネルにリリースされているバージョン1.20では、Flutterはこれらの各基準を改善しています。パフォーマンス



について言えば、レンダリングエンジンの最低レベルとDart言語自体の両方でパフォーマンスを向上させることができました。 Flutterアプリをさらに美しくするため



、このリリースには、待望の自動完了サポート、ウィジェットの移動と拡大縮小の新しい方法、マウスカーソルのサポート、更新されたマテリアル選択ウィジェット（日付と時刻のピッカーウィジェットなど）、新しい応答ページなど、いくつかのUI拡張機能が追加されました。デスクトップおよびモバイルFlutterアプリケーション用のAboutウィンドウのライセンス。生産性を



高めるために、Visual StudioCodeのFlutter拡張機能を更新しました。

  • IDEでDartDevToolsを使用できます。
  • これで、プロジェクト内でファイルを移動でき、インポートが自動的に更新されます。
  • 新しいメタデータのセットが追加されたため、独自のツールを作成できます。


Flutter のオープン性と素晴らしいFlutterコミュニティのおかげで、このリリースには、Flutterコミュニティからの270人の寄稿者を含む、世界中の359人の寄稿者からの3,029件のリークされたプルリクエストと5,485件のクローズされた問題が含まれています。さらに、これは次のリリースの時点で記録的な数の貢献者でした。寄稿者であるCareFの28件のプルリクエスト、AyushBherwani1998の26件（Google Summer of Codeからの10サンプルを含む）、およびa14nに特に感謝します。13のプルリクエストに対して、その多くはFlutterでnullの安全性に取り組んでいるときに採用しました（これについてはすぐに詳しく説明します）。この巨大なコミュニティのサポートがなければ、Flutterを構築することはできませんでした。ご意見ありがとうございます！



Flutterが新しくリリースされるたびに、ユーザー数が急速に増加しています。 4月だけでも、GooglePlayのFlutterアプリケーションの数は5万に達したと書きました。ピーク期間中の成長は、月に1万件の新規アプリケーションに達しました。現在、わずか3か月で、9万を超えるものがGooglePlayで公開されています。



フラッターアプリケーション。 Flutter開発者にとってナンバーワンの地域となったインドで最大の成長が見られます。過去6か月で、その数は2倍になりました。これは、この地域へのGoogleの投資を増やす。最後に、ダートがいなければ、フラッターはフラッターにはなりませんでした。ダートがIEEESpectrum誌のプログラミング言語トップ50で昨年から4位上昇し、12位にランクインしたのは良いことです。



FlutterとDartのパフォーマンスが向上



Flutterは、サイズを縮小してアプリケーションを高速化するための新しい方法を常に模索しています。例えば、今回のリリースでは、我々はパフォーマンス上の問題を修正しました木が揺れたときに、フォント、アイコンを除去しながら、また、デフォルトではこの動作を有効に非Webアプリケーションを構築するとき。上記の改善により、未使用のフォントが削除され、サイズが小さくなります。 FlutterGalleryアプリでこれをテストしました-サイズが100KB縮小されました。これは、リリースビルドのデフォルトの動作になりました。現在のところ、これはTrueTypeフォントでのみ機能しますが、将来のリリースではこの制限が削除される予定です。



もう1つのパフォーマンスの向上は、ウォームアップフェーズを通じて、最初の表示でのアニメーションのギザギザを減らすことです。アニメーションの滑らかさがどのように向上したかを確認してください（わかりやすくするために、記録は2回遅くなります）。





SkSLウォームアップの導入前後のアニメーションの比較



Flutterアプリケーションが最初の起動時に不規則なアニメーションを表示する場合、これはSkia ShadingLanguageを使用して修正できます。アプリケーションの構築段階でプリコンパイルすると、アニメーションを2倍以上高速化できます。この機能を利用したい場合は、flutter.devのSkSLウォームアップページにアクセスしてください。







, Flutter- . ? - Flutter - . 1.20 . , , .



-, Apple (, ) — - Metal. OpenGL.



-, . , flutter build. , . , .


最後に、デスクトップ向けに最適化する際に、引き続きマウスのサポートに取り組んでいます。このリリースでは、マウスヒットテストシステムを作り直して、パフォーマンスの問題のために利用できなかった多くのアーキテクチャ上の利点を提供しました。このリファクタリングにより、Webマイクロベンチマークのパフォーマンスが15倍向上しました。ユーザーは、パフォーマンスを犠牲にすることなく、より優れた、より一貫性のある、より正確なヒットチェッカーを取得できます。



ヒットテストの改善に加えて、デスクトップコンピューターで最も要望の多かった機能の1つであるマウスカーソルのサポートを追加しました。より一般的に使用されるウィジェットのいくつかは、デフォルトで期待するカーソルを表示します。または、サポートされているカーソルのリストから別のものを選択することもできます。







- Flutter for Web . 1.20, . , .




Androidのウィジェットの新しいマウスカーソル



このバージョンのFlutterは、Dart 2.9に基づいており、新しい2パスUTF-8デコーダーが含まれています。これは状態ベースであり、Dart VMで最適化され、SIMD命令を部分的に利用するデコードプリミティブが含まれています。



UTF-8は、インターネットで最も一般的な文字エンコード方式です。迅速にデコードする機能は、大規模なネットワーク応答を取得する上で重要な役割を果たします。UTF-8デコードのベンチマークでは、全体的に改善が見られました。速度の向上は、パフォーマンスの低いARMデバイスで英語でほぼ200％、中国語のテキストで最大400％でした。



Flutterアプリの自動完了



AndroidおよびiOSのFlutterアプリでのテキストフィールドの自動入力のサポートは、長い間最も切望されていた機能の1つです。52126プルリクエストの後、オペレーティングシステムが既に収集したデータをユーザーに再入力するようにユーザーに依頼する必要がなくなったことをお知らせします。





Autocompleteの動作



さらに、この機能をWebに適応させ始めています。



テンプレートアクションの新しいウィジェット



このリリースでは、新しいウィジェットであるInteractiveViewerを追加しました。 InteractiveViewerは、パン、スケーリング、ドラッグアンドドロップなど、サイズ変更された場合でも機能するテンプレート化されたアクションをアプリケーションに実装するように設計されています。Goのボードの例でこのウィジェットがどのように機能するかを次に示します。





InteractiveViewer



を使用したスケーリング、パン、サイズ変更、ドラッグ「n」ドロップInteractiveViewerをアプリケーションに統合するには、APIドキュメントを参照してください。 DartPadで実際に試してみることもできます。 InteractiveViewerの開発について詳しく知りたい場合は、Chicago FlutterYouTubeチャンネルでこのプレゼンテーションをチェックしてください。



新しいバージョンでは、ドラッグ 'n'ドロップのその他のオプション。たとえば、ターゲットウィジェットでドロップが発生した場所を正確に知る必要がある場合（このオプションは以前はDraggableオブジェクトでのみ使用可能でした）、DragTargetonAcceptDetailsメソッドを使用してこのデータを取得できるようになりました。





onAcceptDetailsの動作この機能の詳細については、この例を



確認してください。 Flutterの次のバージョンでは、この情報はドラッグアンドドロップ中にも利用できるようになり、DragTargetがタイムリーに視覚状態を更新できるようになります。







InteractiveViewer , , . , : — Justin McCandless. , Flutter. Justin ChicagoFlutter , Transform GestureDetector InteractiveViewer, .


Material- Slider, RangeSlider, TimePicker DatePicker



このリリースには、新しいウィジェットに加えて、新しいマテリアルデザインの原則に沿って更新されたウィジェットが多数含まれています。具体的には、SliderとRangeSliderです。詳細については、「スライダーウィジェットの新機能」を参照してください。..。







更新されたマテリアルスライダー





更新されたマテリアルRangeSliderDatePicker



は、新しいコンパクトなデザインと日付範囲のサポートを備えています。





DatePickerの更新



最後に、TimePickerを完全に再設計しました。





更新されたTimePicker



このFlutterデモで新しいTimePickerをテストできます。



レスポンシブライセンスページ



AboutDialogで利用できる新しいレスポンシブライセンスページを作成しました。





ライセンスを持つ新しいページが



要求57588引き寄稿者からの TonicArtosがいるマテリアル設計原理に基づいて更新されて。これにより、ウィジェットがより美しくなっただけでなく、ナビゲーションも改善されました。タブレット、デスクトップ、スマートフォンで使用すると便利になりました。TonicArtosに感謝します すべてのFlutterアプリは、使用するパッケージのライセンスを表示する必要があることを考慮して、すべてのFlutterアプリを改善しました。



プラグインを公開するための新しいpubspec.yaml形式



もちろん、Flutterはウィジェットだけではありません。それらはツールでもあります。このリリースには更新が多すぎるので、最も注目すべき更新について説明しましょう。



Flutterプラグインの作成者向けの発表から始めましょう。プラグインを公開するときに、古いpubspec.yaml形式はサポートされなくなりました。使用しようとすると、pubpublishの実行時にエラーが発生します。





古いpubspec形式でプラグインを公開しているときにエラーが発生しました。



古い形式では、プラグインを実行するプラットフォームの指定がサポートされていませんでした。 Flutter1.12以降は非推奨になっています。新しいプラグインまたは更新されたプラグインを公開するには、新しいpubspec.yaml形式が必要になりました。



プラグインユーザーは、引き続き古いpubspec形式を使用できます。非推奨のpubspec.yamlを使用するpub.dev上のすべての既存のプラグインは、当面の間、Flutterアプリケーションで引き続き機能します。



VisualStudioコードに組み込まれているDartDevToolsのプレビュー



このリリースでの最大のツールアップデートは、Visual Studio Code用であり、DartDevToolsを開発スペースに直接導入する新機能のプレビューが含まれています。VisualStudio





コードでのレイアウトエクスプローラープレビュー



新しいdart.previewEmbeddedDevTools設定でこの機能を有効にします。上のスクリーンショットは、Visual StudioCodeに組み込まれているFlutterWidgetInspectorを示しています。この設定を使用すると、ステータスバーにあるDartDevToolsメニューでお気に入りページを割り当てることができます。





このメニューでは、表示するページを選択できます。





この機能はまだプレビュー中です。問題がある場合はお問い合わせください







— , , , Flutter-, VS Code ! , — -. , - , — . : VS Code. Android Studio .




Dart DevToolsの最新バージョンには、Webリクエストのプロファイルを作成できるネットワークユーティリティの更新バージョンが付属しています。





Dart DevTools



ネットワークページの期間、ステータス、およびソケット接続のコンテンツタイプ[ネットワーク]ページでは、ステータスやコンテンツタイプなどの他のデータとともに、アプリケーションからのネットワーク呼び出しにタイミング情報が追加されるようになりました。リクエスト詳細インターフェイスに追加の改善が加えられ、Webソケットまたはhttpリクエストからのデータが表示されるようになりました。このページにはさらに多くの計画があります。たとえば、HTTP要求と応答の本文の表示、およびgRPCトラフィックの監視を追加したいと考えています。



ファイルの名前を変更するときにインポートを更新する



Visual Studio Codeのもう1つの新機能は、ファイルを移動または名前変更するときにインポートが更新されることです。





移動中のDartファイルの更新



この機能は現在、個々のファイルに対してのみ機能しますが、まもなく複数のファイルまたはフォルダーのサポートが追加されます。







Android Studioのコメント、今私があなただったら、私は真剣に心配するでしょう。あなたの最愛のIDEの最も微妙ですがとても重要な機能の1つがVSコードになりました。これで、ファイルの名前を好きなだけ変更できます。すべてのインポートを手動で調整する必要はありません（はい、私たちはすべてこれを実行したことを知っています）。ああ、VSコードプラグインの更新によって何時間節約できましたか。VSコードで他にどのような高度なリファクタリング機能を使用しているのかを知ることは興味深いでしょう。コメントを書いてください。



ツールのメタデータ



もう1つの更新は、Flutterツールを作成する人々向けです。GitHubで新しいプロジェクトを作成しました。そこで、フレームワーク自体に関するメタデータを収集して公開します。その中には、このデータを含む機械可読ファイルがあります。



これは、Android Studio / IntelliJおよびVSCode拡張機能に使用するメタデータです。新しいツールを作成するときに役立つかもしれないと考えました。IntelliJファミリーアプリでは、このメタデータを使用して、Flutterコードで使用されている色の表示を有効にすることができます。







これに関連するのは、Color.fromARGB（）およびColor.fromRGBO（）のカラーブロックをレンダリングするIntelliJおよびAndroidStudioの新機能です。IntelliJのカラープレビューの改善に貢献し







てくれたGitHubのdratushnyyに特に感謝します！



クロスプラットフォーム通信用のタイプセーフプラットフォームチャネル



プラグインの作成者からの一般的なリクエストに応えて、プラグインとAdd-to-Appで、Flutterとプラットフォーム間の通信をより安全かつ簡単にする方法を試すことにしました。これを行うために、Dart構文を使用して追加のランタイム依存関係なしでプラットフォームパイプ上にタイプセーフコードを生成するコマンドラインツールであるPigeonを作成しました。 Pigeonを使用すると、プラットフォームパイプ内のメソッド名を手動で照合して引数をシリアル化する代わりに、Dartメソッドを直接呼び出す（またはその逆）ことで、Java / Objective-C / Kotlin / Swiftメソッドを呼び出し、非プリミティブオブジェクトを渡すことができます。







Pigeonはまだプレリリース状態ですが、video_playerプラグインで使用できるように十分に進化しています。プロジェクトでPigeonを試すことに興味がある場合は、更新されたプラットフォームチャネルのドキュメントとこの例を確認してください。







Pigeon. , . Mobius GDG DevParty, Flutter- . «» , . -. Pigeon — .





Flutter 1.20の作成中に、ツールは非常に多くのすばらしい更新を受け取ったため、ここにすべてをリストすることはできません。それにもかかわらず、あなたは確かにそれらを見て興味があるでしょう：





重大な変更



いつものように、私たちは破壊的な変更を最小限に抑えるように努めています。Flutter1.20でのこれらの変更のリストは次のとおりです。





概要



これは、これまでで最大のFlutterリリースです。この記事では、ツールとパフォーマンスの最も重要な改善点にのみ触れ、新しく更新された最も興味深いウィジェットについて説明しました。nullの安全性の



サポートを追加し（Bob Nystromの詳細な記事「nullの安全性について」を参照）、Ads、Maps、およびWebViewプラグインの新しいバージョンをリリースし、ツールのサポートを拡張する予定です。 新しいフラッター機能をプロジェクトにどのように適用しますか？





More articles:


All Articles