Flutter-development-tools

Flutter-開発ツール

この章では、Flutter開発ツールについて詳しく説明します。 クロスプラットフォーム開発ツールキットの最初の安定版リリースは、2018年12月4日にリリースされたFlutter 1.0です。 Googleはさまざまな開発ツールを使用してFlutterフレームワークの改善と強化を継続的に行っています。

ウィジェットセット

Googleは、素材およびクパチーノウィジェットセット用に更新し、コンポーネント設計でピクセル単位の完璧な品質を提供します。 flutter 1.2の次期バージョンは、デスクトップキーボードイベントとマウスホバーサポートをサポートするように設計されます。

Visual Studio Codeを使用したフラッター開発

Visual Studio Codeはフラッター開発をサポートし、迅速かつ効率的な開発のための広範なショートカットを提供します。 フラッター開発のためにVisual Studio Codeが提供する主要な機能の一部を以下に示します-

• コードアシスト-オプションを確認したい場合、 Ctrl + Space を使用してコード補完オプションのリストを取得できます。
• クイックフィックス- Ctrl + 。 コードの修正に役立つクイック修正ツールです。
• コーディング中のショートカット。
• コメントで詳細なドキュメントを提供します。
• デバッグのショートカット。
• ホットリスタート。

Dart DevTools

Android StudioまたはVisual Studio Code、または他のIDEを使用してコードを記述し、プラグインをインストールできます。 Googleの開発チームは、Dart DevToolsと呼ばれるさらに別の開発ツールに取り組んでいます。これはWebベースのプログラミングスイートです。 AndroidプラットフォームとiOSプラットフォームの両方をサポートしています。 タイムラインビューに基づいているため、開発者はアプリケーションを簡単に分析できます。

DevToolsをインストールする

DevToolsをインストールするには、コンソールで次のコマンドを実行します-

flutter packages pub global activate devtools

Copy

今、あなたは次の出力を見ることができます-

Resolving dependencies...
+ args 1.5.1
+ async 2.2.0
+ charcode 1.1.2
+ codemirror 0.5.3+5.44.0
+ collection 1.14.11
+ convert 2.1.1
+ devtools 0.0.16
+ devtools_server 0.0.2
+ http 0.12.0+2
+ http_parser 3.1.3
+ intl 0.15.8
+ js 0.6.1+1
+ meta 1.1.7
+ mime 0.9.6+2
..................
..................
Installed executable devtools.
Activated devtools 0.0.16.

Copy

サーバーを実行

次のコマンドを使用して、DevToolsサーバーを実行できます-

flutter packages pub global run devtools

Copy

これで、次のような応答が得られます。

Serving DevTools at http://127.0.0.1:9100

Copy

アプリケーションを開始する

アプリケーションに移動し、シミュレータを開き、次のコマンドを使用して実行します-

flutter run --observatory-port=9200

Copy

これで、DevToolsに接続されました。

ブラウザでDevToolsを起動します

次に、ブラウザで以下のURLにアクセスして、DevToolsを起動します-

http://localhost:9100/?port=9200

Copy

あなたは以下に示すように応答を取得します-

Dart Dev Tools

Flutter SDK

Flutter SDKを更新するには、次のコマンドを使用します-

flutter upgrade

Copy

次のように出力を見ることができます-

Flutter SDK

Flutterパッケージをアップグレードするには、次のコマンドを使用します-

flutter packages upgrade

Copy

次の応答が表示されます。

Running "flutter packages upgrade" in my_app... 7.4s

Copy

フラッターインスペクター

フラッターウィジェットツリーを探索するために使用されます。 これを実現するには、コンソールで次のコマンドを実行し、

flutter run --track-widget-creation

Copy

次のように出力を見ることができます-

Launching lib/main.dart on iPhone X in debug mode...
─Assembling Flutter resources...                       3.6s
Compiling, linking and signing...                      6.8s
Xcode build done.                                     14.2s
2,904ms (!)
To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:50399/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

Copy

今、URL、http：//127.0.0.1：50399/に移動すると、次の結果が表示されます-

結果