Flutter

Flutterまとめ

参考

• Flutter
• Dart : 開発言語（javascriptに近い）
  • DartPad : Flutter と Dart 用のオンラインエディタ
• インストールガイド

環境構築

• Get started > Install

• Git のインストール

• Flutter SDK のインストール

  • d:\data\study\flutter
  • bin フォルダに PATH を通す
    • FLUTTER_PATH: d:\data\study\flutter
    • PATH: %PATH%; %FLUTTER_PATH%\bin

• Google Chrome のインストール

• Android Studio のインストール

• VSCode のインストール

  • プラグインのインストール
    • Japanese Language Pack for Visual Studio Code
    • Flutter

• Visual Studio のインストール

  • Community版
  • Visual Studio Installer から C++によるデスクトップ開発をインストール

Windows

• 要件

  • OS: Windows 10 以降の 64bit
  • ディスクサイズ: 1.64 GB
  • ツール: 以下のツールを使用している
    • Windows PowerShell 5.0（Windows10にプリインストールされている） 以降
    • Git for Windows 2.x（Windowsコマンドプロンプトオプションを使用する）

• インストール

  • Flutter SDK

    • Flutter SDK archive

    • 適当なインストールフォルダに解凍

      • ex) D:\flutter

    • パスを通す(D:\flutter\bin)

      powershell

      # SET FLUTTER_PATH=d:\flutter
      # SET PATH=%PATH%;%FLUTTER_PATH%\bin
      $oldSystemPath = [System.Environment]::GetEnvironmentVariable("Path", "Machine")
      $oldSystemPath += ";d:\flutter\bin"
      [System.Environment]::SetEnvironmentVariable("Path", $oldSystemPath, "Machine")
      
      # 確認
      flutter doctor
      

  • Android 設定

    • Android Studio をインストール

    • Download

      • Android SDK
      • Android SDK Command-line Tools
      • Android SDK Build-Tools
      powershell

      # 確認
      flutter doctor
      

    • Android デバイス: Android デバイスで動かす場合

    • Android エミュレータ

      • VM acceleration を有効にする
      • Android Studio を起動し、Device Managerアイコンをクリック。Virtual タブの Create Device を選択。
      • デバイスの定義を選択して次へ
      • エミュレートしたいアンドロイドのバージョンのイメージを選択して次へ
      • Hardware - GLES 2.0 を選択
      • AVD 設定を確認して、finish

    • Android Licenses を認可

      powershell

      flutter doctor --android-licenses
      

  • Windows 設定

    • Visual Studio 2022 か Visual Studio Build Tools 2022 をインストール
      • Download
        • ワークロードから "C++ による デスクトップ開発" を選択する

• エディタ設定

  • VS Code
  • VS Code Flutter extension を追加
  • 確認
    • 表示 > 出力
    • ドロップダウンから flutter を選択
    • 表示 > コマンドパレット
      • doctor を検索し、"Flutter: Run Flutter Doctor" を実行