FlutterでWebView実装時にスマホ実機からローカルホストの Web アプリで機能確認をしたい場合にローカルホストと HTTP 通信する方法です。
今回webviewはflutter_inappwebviewパッケージを利用します。

前準備

・Web アプリ側をローカルホストで立ち上がるようにしておきます。
・PC とスマホが同じ WiFi に接続していることを確認します。

ローカルホストの IP アドレスを確認する

ifconfigコマンドでローカルホストの IP アドレスを取得しておきます。

ifconfig |grep broadcast

ifconfig |grep broadcast
　　 inet 192.168.***.*** netmask 0xffffff00 broadcast 192.168.***.***

inet の値を取得します。

Androidの設定ファイルを変更

HTTP通知を使用できるクリアテキストトラフィックがAndroid 9（API レベル 28）以上ではデフォルトで無効になっているため、有効にするためにAndroidManifest.xmlファイルにandroid:usesCleartextTraffic="true"を追加します。

android/app/src/main/AndroidManifest.xml

<manifest ...>
  <application
    android:label="mochoto"
    ...
    android:usesCleartextTraffic="true">

ただし、この方法は全ての HTTP 通信を許可してしまうため、ローカル IP のみ許可する場合は次のように設定します。

android/app/src/main/res/ディレクトリにxml/network_security_config.xmlファイルを作成します。

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"を追加して読み込みます。

android/app/src/main/AndroidManifest.xml

<manifest ...>
  <application
      android:label="mochoto"
      ...
      android:networkSecurityConfig="@xml/network_security_config"
      >

iOSは特に設定は不要です。

WebViewの参照先にローカルIPアドレスを設定

WebViewの参照先をローカル IP アドレスに設定します。
以下はflutter_inappwebviewパッケージを利用した例です。
今回はhttp://198.168.***.***:3000/を設定します。

lib/main.dart

@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/")),// <--
      ...
    )),
  );
}