Flutter自定义WebView插件custom

Flutter自定义WebView插件custom_webview的使用

功能特性

custom_webview 是一个用于增强 WebView 功能的 Flutter 插件，主要解决了以下问题：

修复了在 Android 设备上打开 PDF 链接的问题。
添加了 URL 列表，并可以通过默认浏览器打开这些链接。

使用方法

1. 添加依赖

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

dependencies:
  custom_webview: ^最新版本号

然后运行以下命令来安装依赖：

flutter pub get

2. 创建 URL 列表

你可以创建一个包含需要通过默认浏览器打开的 URL 列表。例如：

List<String> urlLauncher = [
  'https://play.google.com',
  'https://apps.apple.com'
];

3. 使用 `CustomWebView` 小部件

接下来，你可以在你的 Flutter 应用中使用 CustomWebView 小部件来加载网页或 PDF 文件。以下是完整的示例代码：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// list url will open Launcher
  List<String> urlLauncher = [
    'https://play.google.com',
    'https://apps.apple.com'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: CustomWebView(
        // 加载的 URL 或 PDF 文件
        'https://pub-e1c1c97ce246453790aed20554092539.r2.dev/ATTACHMENTS/a0G1e000005dbx6EAA/Tho%CC%82ng-bao-cap-nhat-phien-ba-1.0.4.pdf',
        // 传递 URL 列表，用于在点击时通过默认浏览器打开
        urlLauncher: urlLauncher,
      ),
    );
  }
}

详细说明

CustomWebView 小部件的主要参数是 url，它指定了要加载的网页或 PDF 文件的 URL。
urlLauncher 参数是一个字符串列表，包含需要通过默认浏览器打开的 URL。当用户点击这些链接时，应用会自动调用系统的默认浏览器来打开它们。
该插件特别适用于需要在 Android 设备上正确显示 PDF 文件的场景，解决了原生 WebView 在处理 PDF 时的一些问题。

注意事项

确保你在 AndroidManifest.xml 中已经配置了必要的权限，特别是网络权限：
```
<uses-permission android:name="android.permission.INTERNET" />
```

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

yuanlaile 1楼•7 天前

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

当然，以下是如何在Flutter项目中使用自定义WebView插件custom_webview的示例代码。假设你已经添加了这个插件到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  custom_webview: ^x.y.z  # 请替换为实际版本号

1. 导入必要的包

首先，在你的Dart文件中导入custom_webview包：

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

2. 创建一个简单的WebView页面

接下来，创建一个使用CustomWebView的页面。这个页面将显示一个Web视图，并允许你进行一些自定义配置。

class WebViewPage extends StatefulWidget {
  final String url;

  WebViewPage({required this.url});

  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late CustomWebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom WebView'),
      ),
      body: Stack(
        children: [
          CustomWebView(
            initialUrl: widget.url,
            onWebViewCreated: (CustomWebViewController webViewController) {
              _controller = webViewController;
            },
            javascriptMode: JavascriptMode.unrestricted, // 允许执行JavaScript
            // 其他配置，如userAgent, headers等可以根据需要添加
          ),
          // 你可以在这里添加一些覆盖在WebView上的按钮或进度条等UI元素
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 使用控制器进行一些操作，例如前进、后退、刷新等
          // _controller.goBack();
          // _controller.reload();
          // 示例：加载一个新的URL
          _controller.loadUrl('https://flutter.dev');
        },
        tooltip: 'Action',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

3. 在你的应用中导航到这个WebView页面

最后，在你的主应用或其他页面中添加导航到这个WebView页面的逻辑：

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: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => WebViewPage(url: 'https://www.example.com')),
            );
          },
          child: Text('Open WebView'),
        ),
      ),
    );
  }
}

总结

上面的代码展示了如何在Flutter中使用custom_webview插件来创建一个简单的WebView页面，包括如何加载一个URL、如何配置JavaScript模式、以及如何控制WebView的行为（例如前进、后退、刷新和加载新URL）。你可以根据需要进一步自定义和扩展这个示例。

Flutter自定义WebView插件custom_webview的使用