Flutter内嵌网页视图插件webview_inapp的使用

Flutter InAppWebView 插件

InAppWebView-logo

A Flutter 插件，允许您添加一个内联网页视图，使用无头网页视图，以及打开一个应用内的浏览器窗口。

文章/资源

官方文档: inappwebview.dev/docs
阅读在线 API 参考获取完整的 API 文档。
官方博客: inappwebview.dev/blog
在官方展示页面: inappwebview.dev/showcase 查找开源项目
检查 flutter_inappwebview_examples 仓库以获取项目示例
查看 flutter_inappwebview/example/integration_test/webview_flutter_test.dart 文件以获取其他代码示例
Flutter Browser App: 使用 Flutter 和 flutter_inappwebview 插件创建的一个全功能移动浏览器应用（类似于谷歌 Chrome 移动浏览器）

展示 - 谁在使用它

查看展示页面以了解使用Flutter和Flutter InAppWebView构建的应用列表。

您是否正在使用Flutter InAppWebView插件并希望将您的应用添加到那里？

请提交申请到提交应用页面！

需求

Dart SDK: ">=2.17.0 <4.0.0"
Flutter: ">=3.0.0"
Android: minSdkVersion >= 19, compileSdk >= 34, AGP 版本 >= 7.3.0（使用 Android Studio - Android Gradle 插件升级助手进行帮助），支持 androidx（参见 AndroidX 迁移以迁移现有应用）
iOS 9.0+: --ios-language swift, Xcode 版本 >= 14.3
MacOS 10.11+: Xcode 版本 >= 14.3

安装

在您的 pubspec.yaml 文件中将 flutter_inappwebview 添加为依赖。

安装 - 网页支持

要在 Web 平台上正常工作，您需要在 web/index.html 文件的 <head> 中添加 web_support.js 文件：

<head>
    <!-- ... -->
    <script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
    <!-- ... -->
</head>

支持

如果您发现该插件有用，请考虑通过捐款来帮助改进它！

原始设计

https://github.com/pichillilorenzo/flutter_inappwebview

该项目遵循 all-contributors 规范。欢迎任何形式的贡献！

示例代码

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_inapp/flutter_inappwebview.dart';

import 'package:flutter_inappwebview_example/chrome_safari_browser_example.screen.dart';
import 'package:flutter_inappwebview_example/headless_in_app_webview.screen.dart';
import 'package:flutter_inappwebview_example/in_app_webiew_example.screen.dart';
import 'package:flutter_inappwebview_example/in_app_browser_example.screen.dart';
import 'package:flutter_inappwebview_example/web_authentication_session_example.screen.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';

// import 'package:path_provider/path_provider.dart';
// import 'package:permission_handler/permission_handler.dart';

final localhostServer = InAppLocalhostServer(documentRoot: 'assets');
WebViewEnvironment? webViewEnvironment;

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // await Permission.camera.request();
  // await Permission.microphone.request();
  // await Permission.storage.request();

  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.windows) {
    final availableVersion = await WebViewEnvironment.getAvailableVersion();
    assert(availableVersion != null,
        'Failed to find an installed WebView2 runtime or non-stable Microsoft Edge installation.');

    webViewEnvironment = await WebViewEnvironment.create(
        settings: WebViewEnvironmentSettings(userDataFolder: 'custom_path'));
  }

  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }

  runApp(MyApp());
}

PointerInterceptor myDrawer({required BuildContext context}) {
  var children = [
    ListTile(
      title: Text('InAppWebView'),
      onTap: () {
        Navigator.pushReplacementNamed(context, '/');
      },
    ),
    ListTile(
      title: Text('InAppBrowser'),
      onTap: () {
        Navigator.pushReplacementNamed(context, '/InAppBrowser');
      },
    ),
    ListTile(
      title: Text('ChromeSafariBrowser'),
      onTap: () {
        Navigator.pushReplacementNamed(context, '/ChromeSafariBrowser');
      },
    ),
    ListTile(
      title: Text('WebAuthenticationSession'),
      onTap: () {
        Navigator.pushReplacementNamed(context, '/WebAuthenticationSession');
      },
    ),
    ListTile(
      title: Text('HeadlessInAppWebView'),
      onTap: () {
        Navigator.pushReplacementNamed(context, '/HeadlessInAppWebView');
      },
    ),
  ];
  if (kIsWeb) {
    children = [
      ListTile(
        title: Text('InAppWebView'),
        onTap: () {
          Navigator.pushReplacementNamed(context, '/');
        },
      )
    ];
  } else if (defaultTargetPlatform == TargetPlatform.macOS) {
    children = [
      // ListTile(
      //   title: Text('InAppWebView'),
      //   onTap: () {
      //     Navigator.pushReplacementNamed(context, '/');
      //   },
      // ),
      // ListTile(
      //   title: Text('InAppBrowser'),
      //   onTap: () {
      //     Navigator.pushReplacementNamed(context, '/InAppBrowser');
      //   },
      // ),
      ListTile(
        title: Text('InAppBrowser'),
        onTap: () {
          Navigator.pushReplacementNamed(context, '/');
        },
      ),
      ListTile(
        title: Text('WebAuthenticationSession'),
        onTap: () {
          Navigator.pushReplacementNamed(context, '/WebAuthenticationSession');
        },
      ),
      ListTile(
        title: Text('HeadlessInAppWebView'),
        onTap: () {
          Navigator.pushReplacementNamed(context, '/HeadlessInAppWebView');
        },
      ),
    ];
  } else if (defaultTargetPlatform == TargetPlatform.windows || 
             defaultTargetPlatform == TargetPlatform.linux) {
    children = [
      ListTile(
        title: Text('InAppWebView'),
        onTap: () {
          Navigator.pushReplacementNamed(context, '/');
        },
      ),
      ListTile(
        title: Text('InAppBrowser'),
        onTap: () {
          Navigator.pushReplacementNamed(context, '/InAppBrowser');
        },
      ),
      ListTile(
        title: Text('HeadlessInAppWebView'),
        onTap: () {
          Navigator.pushReplacementNamed(context, '/HeadlessInAppWebView');
        },
      ),
    ];
  }
  return PointerInterceptor(
    child: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('flutter_inappwebview 示例'),
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
          ),
          ...children
        ],
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (kIsWeb) {
      return MaterialApp(initialRoute: '/', routes: {
        '/': (context) => InAppWebViewExampleScreen(),
      });
    }
    if (defaultTargetPlatform == TargetPlatform.macOS) {
      return MaterialApp(initialRoute: '/', routes: {
        // '/': (context) => InAppWebViewExampleScreen(),
        // '/InAppBrowser': (context) => InAppBrowserExampleScreen(),
        '/': (context) => InAppBrowserExampleScreen(),
        '/HeadlessInAppWebView': (context) => HeadlessInAppWebViewExampleScreen(),
        '/WebAuthenticationSession': (context) => WebAuthenticationSessionExampleScreen(),
      });
    } else if (defaultTargetPlatform == TargetPlatform.windows || 
               defaultTargetPlatform == TargetPlatform.linux) {
      return MaterialApp(initialRoute: '/', routes: {
        '/': (context) => InAppWebViewExampleScreen(),
        '/InAppBrowser': (context) => InAppBrowserExampleScreen(),
        '/HeadlessInAppWebView': (context) => HeadlessInAppWebViewExampleScreen(),
      });
    }
    return MaterialApp(initialRoute: '/', routes: {
      '/': (context) => InAppWebViewExampleScreen(),
      '/InAppBrowser': (context) => InAppBrowserExampleScreen(),
      '/ChromeSafariBrowser': (context) => ChromeSafariBrowserExampleScreen(),
      '/HeadlessInAppWebView': (context) => HeadlessInAppWebViewExampleScreen(),
      '/WebAuthenticationSession': (context) => WebAuthenticationSessionExampleScreen(),
    });
  }
}

更多关于Flutter内嵌网页视图插件webview_inapp的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼•3 天前

更多关于Flutter内嵌网页视图插件webview_inapp的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，我可以为你提供一个关于如何在Flutter应用中使用webview_inapp插件来嵌入网页视图的示例代码。webview_inapp是一个流行的Flutter插件，用于在应用中显示网页内容。

首先，你需要在你的pubspec.yaml文件中添加webview_inapp依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_inapp: ^3.0.3  # 请确保使用最新版本，版本号可能有所更新

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中创建一个包含WebView的页面。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  final InAppWebViewController _webViewController = InAppWebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: InAppWebView(
              initialUrl: 'https://www.example.com',
              initialHeaders: {},
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform: InAppWebViewOptions(
                  mediaPlaybackRequiresUserGesture: true,
                ),
              ),
              onWebViewCreated: (InAppWebViewController controller) {
                _webViewController = controller;
              },
              onLoadStart: (InAppWebViewController controller, String url) {
                print("Started loading URL: $url");
              },
              onLoadStop: (InAppWebViewController controller, String url) async {
                print("Stopped loading URL: $url");
                // Optionally delay the scroll to top for better performance in the UI thread.
                Future.delayed(const Duration(milliseconds: 300), () {
                  controller.scrollTo(0, 0);
                });
              },
              onProgressChanged: (InAppWebViewController controller, int progress) {
                print("Loading progress: $progress%");
              },
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              await _webViewController.back();
            },
            child: Text('Go Back'),
          ),
          ElevatedButton(
            onPressed: () async {
              await _webViewController.reload();
            },
            child: Text('Reload'),
          ),
          ElevatedButton(
            onPressed: () async {
              await _webViewController.loadUrl(
                url: 'https://www.google.com',
              );
            },
            child: Text('Load Google'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _webViewController.dispose();
  }
}

这个示例展示了如何使用webview_inapp插件来创建一个包含WebView的页面，并提供了加载网页、返回上一页、重新加载当前页面以及跳转到新URL的功能。

InAppWebView 组件用于显示网页内容。
onWebViewCreated 回调用于获取WebView控制器，以便后续调用其他方法。
onLoadStart 和 onLoadStop 回调用于监听网页加载的开始和结束。
onProgressChanged 回调用于监听网页加载的进度。
页面底部有三个按钮，分别用于返回上一页、重新加载当前页面以及跳转到Google网站。

确保在实际应用中处理所有可能的错误和边界情况，例如检查WebView控制器是否为null等。