Flutter网页视图插件hyper_webview_flutter的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter网页视图插件hyper_webview_flutter的使用

简介

hyper_webview_flutter 是一个Flutter插件，它允许在Flutter应用中通过WebView加载并处理Juspay支付页面。该插件支持UPI Intent交易，并且可以在Flutter WebView中嵌入支付页面。

Flutter项目设置

  1. 添加依赖 在 pubspec.yaml 文件中添加 hyper_webview_flutter 依赖：

    dependencies:
  flutter:
    sdk: flutter
  hyper_webview_flutter: ^x.x.x  # 请根据实际情况替换版本号
  webview_flutter: ^x.x.x        # 请根据实际情况替换版本号

  2. 导入包 在需要使用WebView的Dart文件中导入 hyper_webview_flutter 包：

    import 'package:hyper_webview_flutter/hyper_webview_flutter.dart';
import 'package:webview_flutter/webview_flutter.dart';

使用步骤

Step 1: 实例化 HyperWebviewFlutter 对象

在你的Dart文件中实例化 HyperWebviewFlutter 对象：

HyperWebviewFlutter hyperWebviewFlutterPlugin = HyperWebviewFlutter();
Step 2: 创建并配置 WebViewController

在 initState 方法中创建并配置 WebViewController，并将其传递给 HyperWebviewFlutter 对象的 attach 方法：

class _WebviewPaymentPageState extends State<WebviewPaymentPage> {
  late WebViewController _controller;

  [@override](/user/override)
  void initState() {
    var url = Uri.parse(widget.url);

    // 创建WebViewController并设置JavaScript模式为不受限制
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(url);

    // 将控制器附加到HyperWebviewFlutter插件
    widget._hyperWebviewFlutterPlugin.attach(_controller);

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter PaymentPage',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: WebViewWidget(controller: _controller),
        ),
      ),
    );
  }
}
Step 3: 渲染WebView

在 build 方法中使用 WebViewWidget 来渲染WebView：

return MaterialApp(
  title: 'Flutter PaymentPage',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Scaffold(
    body: SafeArea(
      child: WebViewWidget(controller: _controller),
    ),
  ),
);

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 hyper_webview_flutter 插件来加载并处理Juspay支付页面：

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

void main() {
  String url = "https://picasso.juspay.in/devtools/web/index.html";
  runApp(WebviewPaymentPage(
    url: url,
  ));
}

class WebviewPaymentPage extends StatefulWidget {
  final String url;
  late final HyperWebviewFlutter _hyperWebviewFlutterPlugin;

  WebviewPaymentPage({super.key, required this.url});

  [@override](/user/override)
  State<WebviewPaymentPage> createState() => _WebviewPaymentPageState();
}

class _WebviewPaymentPageState extends State<WebviewPaymentPage> {
  late WebViewController _controller;

  [@override](/user/override)
  void initState() {
    var url = Uri.parse(widget.url);

    // 创建WebViewController并设置JavaScript模式为不受限制
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(url);

    // 实例化HyperWebviewFlutter插件并附加控制器
    widget._hyperWebviewFlutterPlugin = HyperWebviewFlutter();
    widget._hyperWebviewFlutterPlugin.attach(_controller);

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);

    return MaterialApp(
      title: 'Flutter PaymentPage',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: WebViewWidget(controller: _controller),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用hyper_webview_flutter插件的示例代码。hyper_webview_flutter是一个允许在Flutter应用中嵌入WebView的插件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  hyper_webview_flutter: ^x.y.z  # 请替换为最新版本号

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

2. 配置Android权限（如果需要）

如果你的WebView需要访问互联网，你可能需要在AndroidManifest.xml中添加INTERNET权限：

<uses-permission android:name="android.permission.INTERNET"/>

3. 使用WebView

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewScreen(),
    );
  }
}

class WebViewScreen extends StatefulWidget {
  @override
  _WebViewScreenState createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  final HyperWebViewController? _controller = HyperWebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: HyperWebView(
        initialUrl: 'https://flutter.dev',  // 初始加载的URL
        javascriptMode: JavascriptMode.unrestricted,  // 允许执行JavaScript
        onWebViewCreated: (controller) {
          _controller = controller;
          // 可以在这里保存controller的引用，以便后续调用如加载新URL等方法
        },
        onPageFinished: (url) {
          print("Page finished loading: $url");
        },
        navigationDelegate: (navigationRequest) {
          // 可以在这里处理页面导航请求，如是否允许跳转到新页面
          if (navigationRequest.url.startsWith("https://flutter.dev")) {
            return NavigationDecision.navigate;
          }
          return NavigationDecision.cancel;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 使用controller加载新URL
          _controller?.loadUrl('https://google.com');
        },
        tooltip: 'Load Google',
        child: Icon(Icons.open_in_new),
      ),
    );
  }
}

解释

  1. 依赖和权限：首先在pubspec.yaml中添加依赖，并在AndroidManifest.xml中配置必要的权限。
  2. 创建WebView页面：使用HyperWebView小部件来显示WebView。
  3. 控制器：通过onWebViewCreated回调获取HyperWebViewController的引用，以便后续调用如loadUrl等方法。
  4. 页面加载完成：通过onPageFinished回调监听页面加载完成事件。
  5. 导航委托：通过navigationDelegate回调处理页面导航请求，决定是否允许跳转到新页面。

这样，你就可以在Flutter应用中嵌入并控制一个WebView了。希望这个示例对你有帮助！

回到顶部