Flutterのインストール構成

4375 ワード

前言


Flutterの使用を学ぶのは初めてで、主にドキュメントに従ってFlutterをインストールします.以下のインストールは私の現在の環境構成に基づいて行われています.Mac OS、VSCodeエディタ、Xcodeシミュレータです.公式文書は基本的によく書かれていて、問題に直面していません.ここでは自分で簡単に記録して、文書を簡略化しました.

Flutterのインストール


Flutterをダウンロードして環境変数を設定


1.clone Flutterのbeta倉庫から現在のシステムパスへ:
git clone -b beta https://github.com/flutter/flutter.git

2.ミラーとパスの環境変数構成を~/.bash_profileまたは～/.zshrcに追加します.
//        ，   `/flutter/bin:$PATH`  clone     ，                
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=`pwd`/flutter/bin:$PATH

3.構成が完了したら、端末で構成を再起動します.
source ~/.bash_profile
 
source ~/.zshrc

4.再起動に成功すると、echo $PATHで構成のパスが表示されます.

flutter doctorの実行


次のコマンドを実行して、インストールを完了するために他の依存項目をインストールする必要があるかどうかを確認します.
flutter doctor

このコマンドは、環境を確認し、ターミナルウィンドウにレポートを表示します.Dart SDKはすでにFlutterにバンドルされており、Dartを個別にインストールする必要はありません.コマンドライン出力をよくチェックして、インストールする必要がある他のソフトウェアまたはさらに実行する必要があるタスクを取得します.
例えば、以下は私がflutter doctorを実行するヒントです.いくつかのバージョンのアップグレードなどが含まれています.
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ! CocoaPods out of date (1.5.0 is recommended).
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To upgrade:
        brew upgrade cocoapods
        pod setup
[✗] Android Studio (not installed)
[!] VS Code (version 1.25.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.

エディタプラグインのインストール


私はVSコードを使っているので、ここではVSコードのプラグインのインストールを紹介します.

VSコードのインストール


VS Code、1.20.1以上のバージョンをインストールします.

Dartコードプラグインのインストール

  • VS Code
    • を起動する
  • 呼び出しView>Command Palette...
  • 「install」を入力し、「Extensions:Install Extension」
    • を選択します.
  • 検索ボックスにdart codeを入力し、検索結果リストで「Dart Code」を選択し、Install
    • をクリックします.
  • VS Code
    • を再起動

    設定をFlutter Doctorで確認

  • 呼び出しView>Command Palette...
  • 「doctor」と入力し、「Flutter:Run Flutter Doctor」actionを選択します(この場合、IDEはPATHパスが見つからない可能性があります.プロンプトでclone flutterのディレクトリを直接選択します)
  • 「OUTPUT」ウィンドウの出力に問題があるかどうかを確認する

    • 体験フローター


    プロジェクトの作成

  • VS Code
    • を起動する
  • 呼び出しView>Command Palette...
  • 「flutter」と入力し、「Flutter:New Project」action
    • を選択します.
  • Project名(hello_worldなど)を入力し、Enterキー
    • を押します.
  • アイテムを配置する場所を指定し、青のOKボタン
    • を押します.
  • プロジェクトの作成が続行するのを待ってmainが表示されます.dartファイル
    • 上記のコマンドは、hello_という名前のFlutterプロジェクトを作成します.Materialコンポーネントを使用した簡単なプレゼンテーションアプリケーションを含むworld.
    プロジェクトディレクトリでは、アプリケーションのコードはlib/mainにあります.dart.

    アプリケーションの実行

  • VSコードの右下にターゲットデバイスが選択されていることを確認(デバイスに接続していない場合は、デフォルトで最新のシミュレータが選択されます.例えば、私がここで開いているのはiPhone Xですが、事前に自分でiphone 8のシミュレータを開いたら、iphone 8の上で実行されます)
  • F 5キーまたは呼び出しDebug>Start Debugging
  • アプリケーション起動待ち
  • すべてが正常であれば、アプリケーションが正常に構築された後、デバイスまたはシミュレータにアプリケーション
    • が表示されます.

    体験熱更新


    ホットアップデートとは、プログラムを再実行することなく、修正後のプログラムをリアルタイムでロードすることができ、Flutterでホットアップデートするのは便利です.例えば、私たちが新しく作ったプログラムでlib/main.dartファイルを修正して、中の文案を保存(cmd-s/ctrl-s)すると、すぐにシミュレータの文案修正をリアルタイムで見ることができます.

    リファレンス


    Flutter中国語ドキュメントFlutter英語ドキュメント
    Safariで使用するフォントをRictyに統一する
    スタイルガイドを作ろう[kalei編]