Flutter网页视图展示插件webview_version的使用

Flutter网页视图展示插件webview_version的使用

本插件允许Flutter Android应用检测当前运行的webview包及其版本。此外，它还提供了打开Google Play商店的方法。

pub package

平台支持

Android iOS MacOS Web Linux Windows
✔️ - - - - -

使用方法

示例代码

import 'package:webview_version/webview_version.dart';

String webviewVersion;
try {
  _version = await WebviewVersion.getWebviewVersion;
  _name = await WebviewVersion.getWebViewPackage;
  webviewVersion = "$_name:$_version";
} on PlatformException {
  webviewVersion = 'Failed to get webview version.';
}

完整示例Demo

import 'dart:io';

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

import 'package:flutter/services.dart';
import 'package:webview_version/webview_version.dart';

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

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

class _MyAppState extends State<MyApp> {
  String _webviewVersion = '未知';
  String? _version = "";
  String? _name = "";

  [@override](/user/override)
  void initState() {
    super.initState();
    if (Platform.isAndroid) {
      initWebviewVersion();
    }
  }

  Future<void> initWebviewVersion() async {
    String webviewVersion;
    try {
      _version = await WebviewVersion.getWebviewVersion;
      _name = await WebviewVersion.getWebViewPackage;
      webviewVersion = "$_name:$_version";
    } on PlatformException {
      webviewVersion = '获取webview版本失败。';
    }
    // 如果在异步平台消息处理期间小部件被从树中移除，则我们希望丢弃回复而不是调用setState来更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _webviewVersion = webviewVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('运行于: $_webviewVersion\n'),
              OutlinedButton(
                onPressed: () {
                  final package = _name;
                  if (package != null) {
                    WebviewVersion.startGooglePlay(package);
                  }
                },
                child: Text('打开Google Play'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter中，webview_flutter 是一个非常常用的插件，用于在应用中嵌入网页视图。不过，webview_version 并不是一个官方的Flutter插件，可能是某个特定版本的 webview_flutter 插件，或者是一个第三方插件。通常，我们使用 webview_flutter 插件来展示网页内容。

以下是使用 webview_flutter 插件在Flutter中展示网页视图的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 webview_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0  # 使用最新版本

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

2. 导入插件

在你的Dart文件中导入 webview_flutter 插件：

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

3. 使用 WebView 组件

在 build 方法中使用 WebView 组件来展示网页内容：

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  WebViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

4. 运行应用

将 WebViewExample 作为你应用的入口，然后运行应用：

void main() {
  runApp(MaterialApp(
    home: WebViewExample(),
  ));
}

5. 其他功能

webview_flutter 提供了许多其他功能，例如：

  • JavaScript交互：可以通过 JavascriptChannel 与网页中的JavaScript进行交互。
  • 页面加载控制：可以通过 WebViewController 控制页面的加载、前进、后退等操作。
  • 监听页面加载：可以监听页面的加载状态、错误等事件。

例如，监听页面加载状态：

WebView(
  initialUrl: 'https://www.example.com',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
  },
  onPageStarted: (String url) {
    print('Page started loading: $url');
  },
  onPageFinished: (String url) {
    print('Page finished loading: $url');
  },
  onWebResourceError: (WebResourceError error) {
    print('Error: ${error.description}');
  },
);
回到顶部