Flutter内嵌浏览器插件inapp_browser的使用

Flutter内嵌浏览器插件inapp_browser的使用

inapp_browser 是一个在 Flutter 中使用 WebView 的内嵌浏览器插件。以下是该插件的使用说明。

重要提示

该项目仍在开发中，未来版本将添加新功能和改进的功能。

使用方法

  1. 使用 URI：所有操作都需要使用 URI。确保传递有效的 URI，因为插件本身不会进行验证。此功能将在未来的版本中添加。
  2. 创建 URI：例如：
    Uri uri = Uri.parse('https://www.google.com');
  3. 调用 InappBrowser.showPopUpBrowser() 方法：并传入 context 和 URI。
    InappBrowser.showPopUpBrowser(context, uri);

已实现的功能

  • 前进后退导航
  • 页面刷新
  • URL 分享功能

已知问题

  • 对于 AMP 页面，前进后退导航有些许 Bug
  • 包含重定向的 URL 会破坏后退导航

如果有任何开放的问题，可以在 GitHub 上提交 Issue。 对于功能请求，请在 GitHub 上提交 Issue 并附上功能标签。 如果你愿意帮助这个项目，可以提交 Pull Request。

完整示例 Demo

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

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

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

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)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Test(),
      ),
    );
  }
}

class Test extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          // 创建一个按钮，点击后打开 Google 的网页
          ElevatedButton(
            onPressed: () {
              // 调用 showPopUpBrowser 方法打开 Google 的网页
              InappBrowser.showPopUpBrowser(
                context,
                Uri.parse('https://google.com'),
              );
            },
            child: Text('google.com'),
          ),
          // 创建另一个按钮，点击后打开 pub.dev 网页
          ElevatedButton(
            onPressed: () {
              // 调用 showPopUpBrowser 方法打开 pub.dev 的网页
              InappBrowser.showPopUpBrowser(
                context,
                Uri.parse('https://pub.dev'),
              );
            },
            child: Text('pub.dev'),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter内嵌浏览器插件inapp_browser的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter内嵌浏览器插件inapp_browser的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用inapp_browser插件来内嵌浏览器的代码示例。这个插件允许你在Flutter应用中打开一个内嵌的网页浏览器。

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

dependencies:
  flutter:
    sdk: flutter
  inapp_browser: ^5.3.4  # 请确保使用最新版本

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

接下来，你可以在你的Flutter应用中使用InAppBrowser类来打开网页。以下是一个简单的示例代码：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  InAppBrowserController? _webViewController;
  InAppBrowserGroupOptions options = InAppBrowserGroupOptions(
    android: AndroidInAppBrowserOptions(
      useToolbar: true,
    ),
    ios: IOSInAppBrowserOptions(
      presentationStyle: IOSUIModalPresentationStyle.formSheet,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter InAppBrowser Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            _webViewController = await InAppBrowser.open(
              url: 'https://www.flutter.dev',
              options: options,
            );

            // 监听浏览器关闭事件
            _webViewController?.addListener(
              () async {
                if (_webViewController!.isClosed) {
                  _webViewController = null;
                }
              },
            );
          },
          child: Text('Open Flutter Website'),
        ),
      ),
    );
  }

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

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml文件中添加了inapp_browser依赖。
  2. 创建了一个简单的Flutter应用，其中包含一个按钮。
  3. 当按钮被点击时，使用InAppBrowser.open方法打开一个内嵌的浏览器，并加载指定的URL（在这个例子中是Flutter的官方网站）。
  4. 使用_webViewController来管理内嵌浏览器的生命周期，并在浏览器关闭时将其置为null。

注意：

  • InAppBrowserGroupOptions允许你配置浏览器的一些选项，比如是否显示工具栏等。
  • 你可以监听_webViewController的状态，以便在浏览器关闭时执行一些清理操作。

确保在实际使用时检查inapp_browser插件的文档，因为插件的API可能会随着版本的更新而变化。

回到顶部