FlutterのWebViewでNext.jsとやり取りしてみる

とりま、Flutterのプロジェクト作って、flutter pub add webview_flutter

WebViewControllerを追加する必要があるが、
hooksで書きたいので、以下のリンクのコードを拝借してWebView画面を作成

import 'package:flutter/material.dart';
import 'package:flutter_app/hooks/use_web_view_controller.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebScreen extends HookWidget {
  const WebScreen({super.key});

  @override
  Widget build(BuildContext context) {

    final webViewController = useWebViewController()
      ..loadRequest(Uri.parse('https://www.google.com'));

    return Scaffold(
      body: SafeArea(
        child: WebViewWidget(
          controller: webViewController,
        ),
      ),
    );
  }
}

Masaharu Hori

Next側も適当に作成
bunx create-next-app@latest

Masaharu Hori

Flutter側で、メッセージを受信できるように

import 'package:flutter/material.dart';
import 'package:flutter_app/hooks/use_web_view_controller.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:webview_flutter/webview_flutter.dart';

const webViewName = 'ramen';

class WebScreen extends HookWidget {
  const WebScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final message = useState('');

    final webViewController = useWebViewController()
      ..loadRequest(Uri.parse('http://localhost:3001'))
      ..addJavaScriptChannel(
        webViewName,
        onMessageReceived: (data) {
          message.value = data.message;
        },
      );

    return Scaffold(
      appBar: AppBar(
        title: Text(message.value),
      ),
      body: SafeArea(
        child: WebViewWidget(
          controller: webViewController,
        ),
      ),
    );
  }
}

Masaharu Hori

Next側のコード
これで送信できるらしい
型付けしたいな

import { NextPage } from 'next'

const Home: NextPage = () => {
  const postMessage = () => {
    // @ts-ignore
    ramen.postMessage('送信します！')
  }

  return (
    <main>
      <button onClick={postMessage}>
        データ送信
      </button>
    </main>
  )
}

export default Home

このスクラップは4ヶ月前にクローズされました