Flutter実戦3---PCでFlutterアプリを実行

コードgithubアドレス、PCの工事を追加しました:github.com/koudle/GDG_…
前の2つの文章は簡単な天気検索アプリを実現しました.

Flutter実戦1---天気照会を書くアプリ

Flutter実戦2---天気照会を書くアプリ

FlutterはAndorid、iOSのほか、PCでも実行できるので、以下のPCでのクロスプラットフォームの効果を試してみたいと思っています.FlutterがPCで走りたいのは簡単ではないことに気づいた.
今から始めます.

1.開始

これは、Windows、macOS、and LinuxでのFlutterの実行をサポートするライブラリです.
github.com/google/flut…
次に、これの指示に従って操作します.

2.PC上でexampleプロジェクトを実行する

flutter-desktop-embedding cloneをローカルに移動するには、重要なポイントが必要です.

flutter-desktop-embeddingのプロジェクトは、Flutter SDKのディレクトリと同じレベルの

にあります.flutter-desktop-embedding/example/macos経路にExampleEmbedder.xcodeprojがあり、ダブルクリックしてxcodeで開き、実行後の効果は以下の通りです.
FlutterはPCでは簡単だと思いますが、本当にそうですか??

3.PCで天気照会アプリを実行する

次に、PCにアクセスする前に書かれた天気照会アプリを実現します

3.1 Flutterコードの改造

現在、FlutterのデフォルトではPCがサポートされていないため、改造せずにPCを走っているとUnknown platformのエラーが報告されますが、なぜこのエラーが報告されますか?Flutterは実行時、現在のプラットフォームに基づいてTargetPlatformの値を設定しますが、PCはまだFlutterがデフォルトでサポートしているプラットフォームではないため、TargetPlatformに値を付与していないため、Unknown platformのエラーを投げ出します.具体的には、ソースコードを見てみましょう.

Fluterソースコードのplatform.dartの次のコード:

//   TargetPlatform    
TargetPlatform get defaultTargetPlatform {
  TargetPlatform result;
  //         ，    iOS、Android、Fuchsia，  PC
  if (Platform.isIOS) {
    result = TargetPlatform.iOS;
  } else if (Platform.isAndroid) {
    result = TargetPlatform.android;
  } else if (Platform.isFuchsia) {
    result = TargetPlatform.fuchsia;
  }
  assert(() {
    if (Platform.environment.containsKey('FLUTTER_TEST'))
      result = TargetPlatform.android;
    return true;
  }());
  //    debugDefaultTargetPlatformOverride    ，    ，    result
  if (debugDefaultTargetPlatformOverride != null)
    result = debugDefaultTargetPlatformOverride;
    
  //      ，      TargetPlatform   ，        
  if (result == null) {
    throw FlutterError(
      'Unknown platform.
'
      '${Platform.operatingSystem} was not recognized as a target platform. '
      'Consider updating the list of TargetPlatforms to include this platform.'
    );
  }
  return result;
}

FlutterはiOS、Android、Fuchsiaの3つのプラットフォームのみを判断し、PCプラットフォームは判断せず、result値が空で、Unknown platformの異常を投げた.
改造はとても簡単で、PCプラットフォームが複製していないため、私達は複製して、どのように複製しますか?上のコードを見てください.

  if (debugDefaultTargetPlatformOverride != null)
    result = debugDefaultTargetPlatformOverride;

だから、debugDefaultTargetPlatformOverrideをコピーするには、Googleがわざと開いた口拡張用のような気がします.main()関数、runApp()の前に次のように割り当てられます.

void main(){
  _setTargetPlatformForDesktop();
  runApp(MyApp());
}

/// If the current platform is desktop, override the default platform to
/// a supported platform (iOS for macOS, Android for Linux and Windows).
/// Otherwise, do nothing.
void _setTargetPlatformForDesktop() {
  TargetPlatform targetPlatform;
  if (Platform.isMacOS) {
    targetPlatform = TargetPlatform.iOS;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }

}

Flutterコード改造完了!

3.2空のmacOSプロジェクトを新規作成する

Xcodeで空のmacOSプロジェクトを新規作成します.手順は次のとおりです.
File -> New -> Project -> macOS -> Cocoa APP
これで空のmacOSプロジェクトを新設しましたが、ここではiOSやAndroidでFlutterと同じように、空のシェルプログラムを構築し、Flutterの容器としてFlutterが稼働しています.
次にmacOSエンジニアリングにFlutterの依存を追加します.追加する依存はflutter-desktop-embeddingにあります.必要な依存は4つあります.

flutter-desktop-embedding/library/macos下のFlutterEmbedderMac.xcodeproj

flutter-desktop-embedding/plugins/color_パネル/macosの下にあるxcodeproj

flutter-desktop-embedding/plugins/file_chooser/macos下のFlutterEmbedderFileChooser.xcodeproj

flutter-desktop-embedding/plugins/menuubar/macos下のFlutterEmbedderMenubar.xcodeproj

flutter_assetsのリソースを追加します.つまり、Flutterエンジニアリングがbuildディレクトリの下で生産した製品です.
やっと追加し終わって、疲れて、きっと走ることができると思って、少し運行して、間違いを報告します!もとは経路が探し出せないので、直して、運行して、またFlutter SDKが探し出せないので、また直して、またFlutterEmbedder.にヒントを与えますframeworkバージョンが間違っていて、もともと私の地元のFlutterのバージョンとflutter-desktop-embeddingのバージョンが違っていて、また最新のバージョンに置き換えて、やっとパスしました.
なぜflutter-desktop-embeddingをFlutter SDKと同じレベルのディレクトリに置くのか、同じレベルのディレクトリでなければ経路が間違っていて実行できないのか、ここからも分かるように、flutter-desktop-embeddingはまだ成熟していないし、依存配置もできていないので、GoogleチームもFlutterのPCでの実行を重視し始めた.
上のは複雑すぎて、私はこのようにPCを建てる工事をお勧めしませんので、詳しく話していません.もっと便利な方法があります.

4. Feather

このFeatherというツールを使ってFlutterのPC工事を建てるのは、自分で建てるよりも便利です!
公式サイトFeather
注意:このツールを使用するには
Featherをインストールして、どのようにPC工事を建設するかを見ます:

4.1第一歩

BROWSEをクリックして、ローカルの自分のプロジェクトを選択します.Flutterコードを改造していない場合は、次のヒントがあります.

4.2ステップ2

アプリの名前を書く

4.3ステップ3

選択ICON
作成されたプロジェクトのリストが表示されます.

4.4ステップ4

リストで、プロジェクトをクリックしてリストに入り、TESTをクリックして、以下のようにヒントを与えます.UPDATEをクリックします

4.5ステップ5

クリックOPEN XCODE
そして完成しました.完成した工事はFlutter工事のカタログの下にあります.

5、運行効果