[Flutter]WebviewでローカルホストとHTTP接続する
Flutter で WebView 実装時にスマホ実機からローカルホストの Web アプリで機能確認をしたい場合にローカルホストと HTTP 通信する方法です。
今回 webview は flutter_inappwebview パッケージを利用します。
#前準備
・Web アプリ側をローカルホストで立ち上がるようにしておきます。
・PC とスマホが同じ WiFi に接続していることを確認します。
#ローカルホストの IP アドレスを確認する
ifconfig コマンドでローカルホストの IP アドレスを取得しておきます。
ifconfig |grep broadcastifconfig |grep broadcast
inet 192.168.***.*** netmask 0xffffff00 broadcast 192.168.***.***inet の値を取得します。
#Android の設定ファイルを変更
HTTP 通知を使用できるクリアテキストトラフィック が Android 9（API レベル 28）以上ではデフォルトで無効になっているため、有効にするために AndroidManifest.xml ファイルにandroid:usesCleartextTraffic="true"を追加します。
<manifest ...>
<application
android:label="mochoto"
...
android:usesCleartextTraffic="true">ただし、この方法は全ての HTTP 通信を許可してしまうため、ローカル IP のみ許可する場合は 次のように設定します。
android/app/src/main/res/ディレクトリにxml/network_security_config.xmlファイルを作成します。
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">192.168.xxx.xxx</domain>
</domain-config>
</network-security-config>
AndroidManifest.xml ファイルの application タグにandroid:networkSecurityConfig="@xml/network_security_config"を追加して読み込みます。
<manifest ...>
<application
android:label="mochoto"
...
android:networkSecurityConfig="@xml/network_security_config"
>iOS は特に設定は不要です。
#WebView の参照先にローカル IP アドレスを設定
WebView の参照先をローカル IP アドレスに設定します。
以下は flutter_inappwebview パッケージを利用した例です。
今回はhttp://198.168.***.***:3000/を設定します。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Mochoto InAppWebView")),
body: SafeArea(
child: InAppWebView(
key: webViewKey,
initialUrlRequest: URLRequest(url: WebUri("http://198.168.***.***:3000/")),// <--
...
)),
);
}#ビルド
ビルドしてスマホで確認すると、ローカルホストの Web アプリが表示されます。
#関連記事
[Flutter]flutter_inappwebviewでWebview表示する
FlutterのWebview実装でflutter_inappwebviewを使う![[Flutter]flutter_inappwebviewでWebview表示する](https://www.mochot.com/opengraph-image.png)