😭

webview_flutter

2024/04/22に公開

Flutter

Dart

tech

🤔やってみたいこと

Flutterで、WebPageを表示するライブラリであるwebview_flutterを久しぶりに使ってみようとしたら、Codelabsのコードが古かった😱

公式ドキュメントを読めということか...

こちらの動画も参考になりました😁

WebView ウィジェットを提供する Flutter プラグイン。

iOS では、WebView ウィジェットは WKWebView によってサポートされます。 Android では、WebView ウィジェットは WebView によってサポートされます。

使うには？

pubspec.yaml ファイルに webview_flutter を依存関係として追加します。

次の方法で WebView を表示できるようになりました。

WebViewController をインスタンス化します。

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..setNavigationDelegate(
    NavigationDelegate(
      onProgress: (int progress) {
        // Update loading bar.
      },
      onPageStarted: (String url) {},
      onPageFinished: (String url) {},
      onWebResourceError: (WebResourceError error) {},
      onNavigationRequest: (NavigationRequest request) {
        if (request.url.startsWith('https://www.youtube.com/')) {
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ),
  )
  ..loadRequest(Uri.parse('https://flutter.dev'));

コントローラーを WebViewWidget に渡します。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter Simple Example')),
    body: WebViewWidget(controller: controller),
  );
}

詳細については、WebViewController および WebViewWidget の Dartdocs を参照してください。

Android プラットフォームのビュー
このプラグインは、プラットフォームビューを使用して Android の WebView を Flutter アプリ内に埋め込みます。

ただし、以前は 19 未満だった場合は、android/app/build.gradle で正しい minSdkVersion を設定するようにしてください。

android {
    defaultConfig {
        minSdkVersion 19
    }
}

この設定をすれば、Flutterの公式サイトを表示することができます。

🚀やってみたこと

サンプルコードには、使わなくてよいコードが含まれているので省略しました。これだけでもWebViewを組み込むことはできます。

Example Code:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {

  // initialize webview here !!
  final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..loadRequest(Uri.parse('https://flutter.dev'));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body:  WebViewWidget(controller: controller),
    );
  }
}

サンプルを実行するコード

main.dart

import 'package:flutter/material.dart';
import 'package:widget_cookbook/webview_flutter/webview_app.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WebViewApp(),
    );
  }
}

おお表示できました🥳

StatelessWidgetでも一応表示できるみたい？

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewApp extends StatelessWidget {
  const WebViewApp({super.key});


  @override
  Widget build(BuildContext context) {
  // initialize webview here !!
  final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..loadRequest(Uri.parse('https://flutter.dev'));
  
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body:  WebViewWidget(controller: controller),
    );
  }
}

🙂最後に

WebViewを表示して操作していて気づいたことがあるのですが、前のページに表示する戻るボタンがありませんでした😇
工夫すれば表示されるのかも....

🤔やってみたいこと

使うには？

🚀やってみたこと

🙂最後に

Discussion