Dart 入門：WiFi接続情報QR生成ツール（Dart Web版）

WiFi接続のためのQRコードを生成するアプリをDart Webで作成します。

プロジェクトの作成
ソースコード
ビルド
実行
感想

プロジェクトの作成

dart create -t web-simple wifi_qr
cd wifi_qr
code .

ソースコード

ファイル名:index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Wi-Fi QR Generator</title>
  <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
  <script>
    // ☆ Dart から呼び出す関数
    function generateWifiQR(text) {
      // #qr の中をクリア
      var div = document.getElementById("qr");
      div.innerHTML = "";

      // QR コード生成
      new QRCode(div, {
        text: text,
        width: 256,
        height: 256,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.M
      });
    }
  </script>
  <script defer src="main.dart.js"></script>

  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h2>Wi-Fi QRコード生成</h2>

  <label>SSID:
    <input id="ssid" type="text">
  </label>

  <label>パスワード:
    <input id="pass" type="password">
  </label>

  <label>暗号化方式:
    <select id="type">
      <option value="WPA">WPA/WPA2/WPA3</option>
      <option value="WEP">WEP</option>
      <option value="">なし（オープン）</option>
    </select>
  </label>

  <button id="btn">QRコード生成</button>

  <div id="qr"></div>

</body>
</html>

ファイル名:main.dart

import 'package:web/web.dart' as web;
import 'dart:js_interop';

// qrcode.jsの型定義
@JS()
external void generateWifiQR(String text);


// エントリーポイント
void main() {
  // ボタンを取得
  final btn = web.document.querySelector('#btn') as web.HTMLButtonElement?;

  // ボタンクリックイベントの監視
  btn?.addEventListener('click', ((web.Event event) {
    generateQR();
  }).toJS,);
}

// QRコード生成関数
void generateQR() {
  // SSID
  final ssid =
      (web.document.querySelector('#ssid') as web.HTMLInputElement?)?.value ??
          '';
  // パスワード
  final pass =
      (web.document.querySelector('#pass') as web.HTMLInputElement?)?.value ??
          '';
  // セキュリティタイプ
  final selectedType =
      (web.document.querySelector('#type') as web.HTMLSelectElement?)?.value;

  final type = (selectedType == null || selectedType.isEmpty)
      ? 'WPA'
      : selectedType;
  // WIFI接続情報のフォーマット
  final wifiString = 'WIFI:T:$type;S:$ssid;P:$pass;;';

  generateWifiQR(wifiString);

}

ファイル名:styles.css

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: sans-serif;
  padding: 20px;
  max-width: 400px; 
}
label {
  display: block;
  margin-top: 12px;
}
#qr {
  margin-top: 20px;
}

ビルド

dart compile js -o web/main.dart.js web/main.dart

実行

実行できるGitHub Pagesへのリンク
スクリーンショット

感想

QRコード生成ように外部のjsライブラリを使っていますが、これをDartから呼び出す方法が探せませんでした。
しかたがないので、index.html内で外部ライブラリを呼び出すJavaScriptのユーザー関数を作り、Dartからユーザー関数を呼び出す形にしました。