Flutter Webをローカルネットワークから確認できるように立ち上げるgrinderコマンド

はじめに

Flutter Webの開発をしていると、手元のスマホなどで確認したいことがあると思います。
そんな時に便利なGrinderコマンドを作りました。

mac向けです

前提知識

Flutter Webをローカルネットワークから確認する方法

https://zenn.dev/fastriver/articles/flutter-web-debug-lan

Grinderとは

https://zenn.dev/k9i/articles/bcfa83b08e56d6

やりたいこと

1. 端末のipアドレスを取得する
2. web-serverオプションをつけて実行する

ソースコード

Grinderの使い方は前提知識の記事を参照ください。

fw関数が本体です。ipconfigコマンドの結果からIPv4のアドレスを抜き出して、それを元にflutter runしています。

import 'dart:io';

import 'package:grinder/grinder.dart';

void main(List<String> args) => grind(args);

Future<void> _runCommand({
  required String command,
}) async {
  final splittedCommand = command.split(' ');
  log(command);
  final process = await Process.start(
    splittedCommand.first,
    splittedCommand.sublist(1),
  );
  stdout.addStream(process.stdout);
  stderr.addStream(process.stderr);
}

@Task('flutter run -d web-server --web-hostname=0.0.0.0 --web-port=50505')
void fw() {
  final result = Process.runSync('ifconfig', [], runInShell: true);
  if (result.exitCode != 0) {
    throw Exception(
        'ifconfig command failed with exit code ${result.exitCode}');
  }
  final output = result.stdout.toString();
  final lines = output.split('\n');
  for (var line in lines) {
    if (line.contains('inet ') && !line.contains('127.0.0.1')) {
      final ip = line.split(' ')[1];
      log(ip);
      _runCommand(
        command:
            'flutter run -d web-server --web-hostname=$ip --web-port=50505',
      );
      break;
    }
  }
}

コマンド実行

ターミナルで以下のコマンドを実行します。

grind fw

サーバーが立ち上がりました🥳
http://192.168.181.67:50505にアクセスすれば、ネットワーク内の端末からFlutter Webが見えます。

まとめ

grind fwと入力するだけでFlutter Webアプリをローカルネットワークから確認できるようになりました。

追記

ワイルドカードマスク（IPアドレス 0.0.0.0）を使って、IPアドレスの取得などせずに以下のコマンドで起動できるようです。IPアドレスを固定している場合は、これで立ち上げて固定されているアドレスにアクセスしても良さそうです。

flutter run -d web-server --web-hostname=0.0.0.0 --web-port=50505