Flutter開発の効率化：VSCodeのlaunch.jsonにinputsを追加してデバイスプレビュー選択を簡単に

Flutter開発でDevice Previewを効率的に利用するためのVSCodeのlaunch.json設定方法について解説します。

VSCodeの入力変数の利用

VSCodeでは、入力変数を使用してlaunch.jsonファイル内で動的に値を設定できます。
詳細はVSCode公式ドキュメントを参照してください。
https://code.visualstudio.com/docs/editor/variables-reference#_input-variables

今回はこの機能を利用して、launch.jsonにデバイスプレビューの選択オプションを追加します。
具体的には、Flutterの環境変数を設定しています。

launch.jsonの設定

以下はlaunch.jsonにinputsを追加する例です。

    "configurations": [
        {
            "name": "device_preview_sample",
            "request": "launch",
            "type": "dart",
            "args": [
                "--dart-define=devicePreview=${input:devicePreview}"
            ],
        },
    ],
    "inputs": [
        {
        "id": "devicePreview",
        "type": "pickString",
        "description": "Select the value for devicePreview",
        "options": [
            "on",
            "off"
        ],
        "default": "off"
        }
    ]

この設定により、実行時に入力変数の値を環境変数として渡すことができます。

inputsの詳細

inputsセクションでは環境変数が設定されています。各項目の説明は以下の通りです。

• id: 入力変数の識別子
• type: 入力タイプ
• description: 入力変数の説明
• options: 入力変数の選択肢
• default: デフォルトの選択肢

ここでは、pickStringを使用していますが、VSCodeではpromptString、pickString、commandの3つのタイプがあります。

Flutterコードの例

以下はFlutterでのデバイスプレビュー設定のサンプルコードです。

import 'package:device_preview/device_preview.dart';
import 'package:flutter/material.dart';

const _devicePreviewStr = String.fromEnvironment('devicePreview');
const _devicePreviewIfNeeded = (_devicePreviewStr == 'on');

void main() {
  runApp(
    DevicePreview(
      enabled: _devicePreviewIfNeeded,
      builder: (context) => const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

この設定により、デバイスプレビューの選択が容易になります。

こちらが設定した際のイメージです。

今回はdevice_previewを例にしましたが、他の設定にも応用可能だと思います。
是非試してみてください。