Flutter WebView展示插件smaad_flutter

Flutter WebView展示插件smaad_flutter_webview的使用

这是一个允许你添加内联webview、使用无头webview以及打开应用内浏览器窗口的Flutter插件。

需求

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 plugin Upgrade Assistant 进行升级）
- 支持 androidx （参见 AndroidX Migration 来迁移现有应用）
iOS 9.0+: --ios-language swift, Xcode版本 >= 14.3
MacOS 10.11+: Xcode版本 >= 14.3

WebView页面指令代码示例

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:smaad_flutter_webview/smaad_flutter_webview.dart';

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

class _WebViewExampleScreenState extends State<WebViewExampleScreen> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;
  InAppWebViewSettings settings = InAppWebViewSettings(
      isInspectable: kDebugMode,
      mediaPlaybackRequiresUserGesture: false,
      allowsInlineMediaPlayback: true,
      iframeAllow: "camera; microphone",
      iframeAllowFullscreen: true);

  String url = "";

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(children: <Widget>[
      Expanded(
        child: Stack(
          children: [
            InAppWebView(
              key: webViewKey,
              zoneId: 'YOUR_ZONE_ID', // 替换为你的zone ID
              userParameter: 'YOUR_USER_PARAMETER', // 替换为你的用户参数
              initialSettings: settings,
              onWebViewCreated: (controller) async {
                webViewController = controller;
              },
              onLoadStart: (controller, url) async {
                setState(() {
                  this.url = url.toString();
                });
              },
              onPermissionRequest: (controller, request) async {
                return PermissionResponse(
                    resources: request.resources,
                    action: PermissionResponseAction.GRANT);
              },
              shouldOverrideUrlLoading: (controller, navigationAction) async {
                var uri = navigationAction.request.url!;
                print('uri = $uri');
                return NavigationActionPolicy.ALLOW;
              },
              onLoadStop: (controller, url) async {
                setState(() {
                  this.url = url.toString();
                });
              },
              onReceivedError: (controller, request, error) {},
              onWebViewClosed: (controller) async {
                //TODO Navigator.pop(context);
                print('webview closed');
                Navigator.pop(context);
              },
              onUpdateVisitedHistory: (controller, url, isReload) {
                setState(() {
                  this.url = url.toString();
                });
              },
              onConsoleMessage: (controller, consoleMessage) {
                print(consoleMessage);
              },
            ),
          ],
        ),
      ),
    ])));
  }
}

安装

在 pubspec.yaml 文件中添加 smaad_flutter_webview 作为依赖项。

安装 - Web支持

为了在Web平台上正常工作，你需要将 web_support.js 文件添加到 web/index.html 文件的 <head> 部分：

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

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用 smaad_flutter_webview 插件。

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_example/webiew_example.screen.dart';
import 'package:smaad_flutter_webview/smaad_flutter_webview.dart';
// import 'package:smaad_flutter_webview/example/lib/webiew_example.screen.dart';

InAppLocalhostServer localhostServer = InAppLocalhostServer(documentRoot: 'assets');

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

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

  if (!kIsWeb) {
    await localhostServer.start();
  }

  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(), // 新的主页设置
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('测试'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('打开WebView'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => WebViewExampleScreen()),
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter WebView展示插件smaad_flutter_webview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼

更多关于Flutter WebView展示插件smaad_flutter_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter应用中使用smaad_flutter_webview插件来展示WebView的示例代码。请注意，在实际使用之前，你需要确保已经在pubspec.yaml文件中添加了该插件的依赖。

pubspec.yaml

首先，在pubspec.yaml文件中添加smaad_flutter_webview依赖：

dependencies:
  flutter:
    sdk: flutter
  smaad_flutter_webview: ^最新版本号  # 请替换为实际最新版本号

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

main.dart

接下来，在main.dart文件中使用smaad_flutter_webview插件来展示WebView。

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

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

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

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

class _WebViewPageState extends State<WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Demo'),
      ),
      body: WebViewX(
        initialUrl: 'https://www.example.com', // 替换为你想要展示的网页URL
        javascriptMode: JavascriptMode.unrestricted, // 允许JavaScript执行
        loadingProgressListener: (progress) {
          // 可选：监听加载进度
          print('Loading progress: $progress%');
        },
        onWebViewCreated: (controller) {
          // 可选：WebView创建后的回调
          print('WebView created!');
        },
        onPageFinished: (url) {
          // 可选：页面加载完成后的回调
          print('Page finished loading: $url');
        },
        onError: (code, message) {
          // 可选：处理加载错误
          print('WebView error: Code: $code, Message: $message');
        },
      ),
    );
  }
}

解释

依赖添加：在pubspec.yaml文件中添加smaad_flutter_webview依赖。
创建应用：在main.dart文件中创建一个简单的Flutter应用。
WebView页面：创建一个WebViewPage类，它是一个有状态的Widget，用于显示WebView。
WebViewX组件：使用WebViewX组件来展示WebView，并设置初始URL、JavaScript模式等参数。
回调方法：可选地添加了一些回调方法，如监听加载进度、处理加载错误等。

确保你已经按照上述步骤正确添加了依赖并更新了代码，然后运行你的Flutter应用。你应该能够看到一个包含指定网页的WebView。如果在实际使用中遇到任何问题，请查阅smaad_flutter_webview的官方文档或相关社区资源以获取更多帮助。