KC Blog

Cursor (vscode) build flutter

4 min read
AI#cursor#flutter

はじめに

  • flutterの記事では、環境をセットアップしました。その時は手動でコマンドを実行してビルドしていました
  • 今回はCursor (vscode)を使ってビルドする方法を試してみます

🛠 IDEでflutter run環境を設定する

はじめに

  1. flutterに必要な環境をインストールします。ただし前回の記事で既に説明したので、ここではスキップします。
  2. MARKPLACE / EXTENSIONからflutterプラグインをダウンロードします
flutter
  1. インストール後、IDEを再起動し、win/command + shift + pを押すと内蔵コマンドツールが表示されます 同時にflutter doctorと入力し、実行をクリックします
flutter

チェックが開始されます（主にIDEで使用可能なflutter環境が整っているかを確認します）

flutter
  1. 次にプロジェクト内に../.vscode/launch.jsonを作成します
flutter

  • 以下のjson形式を使用してflutterのビルド設定を作成します

    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "MultiAIChatFlutter",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "MultiAIChatFlutter (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        },
        {
            "name": "MultiAIChatFlutter (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release"
        }
    ]
}

  • IDEを通じて生成することもできます。新しいIDEにはワンクリックでlaunch.json設定を生成する機能があります Build＆Debugを見つけて、create a launch.json fileをクリックします

flutter 
IDEがどのプロジェクトを設定するか選択させます。flutterの場合は`Dart & Flutter`を選びます
flutter
  1. その後、左上の再生ボタンをクリックするか、IDEでF5キーを押すと、IDEを通じてflutterのビルドが開始されます

IDEでワンクリックでmacOS .dmg をビルドする設定

  1. 前のステップで既に../.vscode/launch.jsonを作成しています 今度はmacOS .dmgをビルドするためのコマンドを設定し、同時にinputsを作成してdmgのタイトルを動的に入力できるようにします

        {

        "version": "0.2.0",
        "configurations": [
            //省略...
            , 
            {
                "name": "Build macOS DMG",
                "request": "launch",
                "type": "node-terminal",
                "command": "flutter config --enable-macos-desktop && flutter build macos && create-dmg build/macos/Build/Products/Release/${workspaceFolderBasename}.app --dmg-title=\"${input:dmgTitle}\" --overwrite",
                "preLaunchTask": "checkDependencies"
            }
        ],
        "inputs": [
            {
                "id": "dmgTitle",
                "type": "promptString",
                "description": "DMG Title",
                "default": "${workspaceFolderBasename}"
            }
        ]
    }
  • 簡単な説明：configurationsの中にBuild macOS DMGというビルドタスクを設定しました。 このタスクはmacOS build設定を有効にする、flutter build macosを実行する、create-dmgを実行するなどのアクションを実行します この中で--dmg-titleの値はinputsのメンバーdmgTitleから取得します
  1. IDEでBuild macOS DMGスクリプトを選択します
flutter
  1. dmgTitleを設定しているため、IDEは入力欄を表示して好きな名前を入力できます
flutter
  1. その後、ターミナルが自動的に開いてビルドが始まります
flutter