1. Flutterモバイルアプリ実践チュートリアル【環境設定、シミュレータ設定】

I. 概要

Flutter は、開発者が
IOS と Android の両方のプラットフォームで高品質のネイティブ UI を開発できるようにする Google のモバイル SDK です。1 つのコードで、IOS と Android 用の 2 つの高性能で忠実度の高いアプリケーションを同時に生成できます。

2. レンダリングの仕組み

Flutter がネイティブと同等、またはそれ以上のエクスペリエンスを実現できる理由は、主にその高性能グラフィックレンダリング機能によるものです。まず、Flutter のレンダリングメカニズムをネイティブ Android および他のクロスプラットフォームフレームワーク (RN など) と比較します。 )、以下に示すように:

Android ネイティブアプリが描画するとき、最初に Android フレームワークの Java コードを呼び出し、次に Skia (c/++) 描画エンジンを呼び出し、最後にデバイス上でのレンダリングを完了するための CPU/GPU 命令を生成します。
Flutter が描画しているとき、ホームページは Flutter Framework の Dart コードを呼び出し、次に Skia (c/++) 描画エンジンを直接呼び出し、最後にデバイス上でレンダリングするための CPU/GPU 命令を生成します。
他のクロスプラットフォームフレームワーク (RN など) は、最初にそのフレームワークの JavaScript コードを呼び出してから、ネイティブフレームワークよりも 1 つ多いレイヤーである Android フレームワークの Java コードを呼び出します。 1つ。

Flutter と Android はネイティブであることがわかり、Flutter Framework の Dart コードの効率が Android Framework の Java コードの効率と同等である限り、Flutter アプリはネイティブと同等のパフォーマンスエクスペリエンスを実現できることが理解できます。

さらに、Flutter で使用される Skia レンダリングエンジンは Flutter sdk の一部であり、Flutter sdk のアップグレードとともにアップグレードされます。ネイティブの Skia レンダリングエンジンは、Android オペレーティングシステムのアップグレードとともにアップグレードする必要があります。そのため、パフォーマンスの向上は、 Skia エンジンが影響を受け、よりタイムリーに Flutter アプリに影響します。

3. 環境構築

Flutter SDKをダウンロード
環境変数を更新し、FLUTTRE_HOME変数を追加します。値は Flutter インストールパッケージの場所であり、次のPATH場所に追加します。%FLUTTER_HOME%\bin
これを実行するfluuter doctorと、まだインストールされていないソフトウェアが検出されます。[X] は、インストールする必要があることを示します。
Android Studioをインストールします。インストールプロセス中に自動的にインストールされますAndroid SDK。(ステップ 7 もこの IDE で実行されます)
開くfile>settings、インストールするDart、Flutterプラグイン
コマンドラインのライセンス認証を入力します。 flutter doctor --android-licenses
開くfile>settings、入力するAndroid SDK、インストールするcmmmand-line tools

ソースを変更し、次の 2 つの環境変数を追加します。

PUB_HOSTED_URL = https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn

SDK環境変数を追加する

//新增系统变量
ANDROID_HOME=C:\Users\SC9535\AppData\Local\Android\Sdk

//新增Path
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools
%ANDROID_HOME%\emulator

上記の設定をすべて完了した後、再度実行するflutter doctorと、次のように表示されます。

画像-20230903211803928

Visual Studio当分の間 Windows デスクトッププログラムを開発する必要がないため、この IDE がインストールされていないことを除けば、その他はすべて正常にインストールされています。

4. エミュレータをインストールする

1. 手順

Android Studio右側を開いて「シミュレーターの作成」DeviceMachine をクリックしますCreate Device。

画像-20230903212833357

画像を選択する場合は、x86 を選択することをお勧めします。(インストールされていない場合はhamx、インターフェイスに赤いインストールプロンプトが表示されます。インストールを入力するだけです)

画像-20230903213048922

[完了]をクリックします

画像-20230903213231408

画像-20230903213543978

2. 走る

调试上のボタンをクリックする画像-20230903213909524 と、起動完了後に下のシミュレータウィンドウが表示されます。

画像-20230903213822575

この時点で、基本的な環境とシミュレータの構成は完了です。

5. シミュレータを実行するその他の方法

1. VS Code がシミュレーターを実行します

Android Studioでシミュレータを作成した後、VS code開発に切り替えると、vs codeシミュレータを実行することもできます。

まず、VS code右下隅でエミュレータを起動します。

画像-20230904203201087

Android Studio上記のように、「Nexus 5 API 30-Test」で作成したエミュレータを選択します。「起動」を選択すると、アプリケーションが開いていない状態で初期エミュレータが表示されます。

画像-20230904203430684

terminal最後に、コマンドラインを開いてflutter runコマンドを実行すると、以下に示すように、シミュレーターが現在のアプリを自動的に実行します。

画像-20230904203654987

2. コマンドラインからシミュレータを実行します。

まず、環境変数にANDROID_HOME変数が含まれていることを確認する必要があります。

このマシンでどのシミュレータが使用できるかを確認するには、次のコマンドを使用してクエリを実行します。

%ANDROID_HOME%\emulator\emulator.exe -list-avds

画像-20230904213132850

指定したエミュレータを起動すると以下が有効になりますNexus_5_API_30-Test。

%ANDROID_HOME%\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5_API_30-Test

シミュレーションの実行が開始されます。

6. よくある質問

1、Androidエミュレータは不正です

方法 1:
エミュレータデータを消去する
ここに画像の説明を挿入します
方法 2:

すべてのエミュレータを終了します
~/.android/adbkey と ~/.android/adbkey.pub を削除します
adb キルサーバー
adb devices AVD のデータを消去
エミュレータを再起動する

Androidエミュレータが不正です

推奨読書: Windows プラットフォームでの Flutter UI システム Flutter のインストールと構成
について