如何使用 url_launcher 插件在 Flutter 中启动原生 URL Schemes

介绍

该url_launcher插件允许您的 Flutter 应用程序执行一些操作，例如在 Safari 中打开网页或使用上下文深度链接到另一个应用程序。

在本文中，您将使用url_launcher启动网页、地图和电话号码。

先决条件

要完成本教程，您需要：

本教程已通过 Flutter v1.22.2、Android SDK v31.0.2 和 Android Studio v4.1 验证。

步骤 1 — 设置项目

为 Flutter 设置环境后，您可以运行以下命令来创建新应用程序：

  • flutter create url_launcher_example

导航到新的项目目录：

  • cd url_launcher_example

使用flutter create将生成一个演示应用程序，该应用程序将显示单击按钮的次数。

第 2 步 – 添加url_launcher插件

接下来，我们需要url_launcher在我们的插件中添加插件pubspec.yaml：

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  url_launcher: ^6.0.3

我们现在可以继续在 iOS 或 Android 模拟器或您选择的设备上运行它。

第 3 步 – 搭建应用程序

现在，main.dart在您的代码编辑器中打开。

将此文件中的所有内容替换为MaterialApp指向 a 的 aHomePage可在以下位置找到home.dart：

lib/main.dart
import 'package:flutter/material.dart';
import 'package:url_launcher_example/home.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Launcher',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: HomePage(),
    );
  }
}

接下来，创建一个新home.dart文件并添加以下代码行：

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          ListTile(
            title: Text("Launch Web Page"),
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

现在我们已经建立了一个基础应用程序，我们可以开始使用url_launcher.

第 4 步 – 启动网页

url_launcher 支持启动网页。

重新访问home.dart并修改以下代码行：

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          ListTile(
            title: Text("Launch Web Page"),
            onTap: () async {
              const url = 'https://google.com';

              if (await canLaunch(url)) {
                await launch(url, forceSafariVC: false);
              } else {
                throw 'Could not launch $url';
              }
            },
          ),
        ],
      ),
    );
  }
}

请注意我们如何canLaunch在调用该launch函数之前检查设备是否具有特定的 URL 方案。

然后使用 iOS 模拟器运行应用程序，然后单击Launch Web Page：

url_launcher 使用 Google 启动浏览器的屏幕截图。

在这种情况下，我们调用launch与forceSafariVC设置为false。当未指定时，它将使用“Safari View Controller”。

如果我们希望 iOS 和 Android 在应用程序内打开网页（例如作为 WebView），我们会做这样的事情：

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          // ...
          ListTile(
            title: Text("Launch Web Page (with Web View)"),
            onTap: () async {
              const url = 'https://google.com';

              if (await canLaunch(url)) {
                await launch(url, forceWebView: true);
              } else {
                throw 'Could not launch $url';
              }
            },
          ),
        ],
      ),
    );
  }
}

然后使用 iOS 模拟器运行应用程序，并单击Launch Web Page (with Web View)：

url_launcher 使用 Google 以 WebView 样式启动浏览器的屏幕截图。

现在您可以url_launcher用于网页。

第 5 步 — 启动 Google Maps 和 Apple Maps

url_launcher 支持启动地图。

重新访问home.dart并设置纬度和经度：

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  // ...
}

注意：如果您想在实际应用程序中执行此操作，您可能需要利用geocoding并geolocator确定用户的当前位置

然后我们可以添加一个新的ListTile，可以与comgooglemaps:和https:URL 方案一起使用：

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          // ...
          <^>ListTile(
            title: Text("Launch Maps"),
            onTap: () async {
              final String googleMapsUrl = "comgooglemaps://?center=$lat,$lng";
              final String appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";

              if (await canLaunch(googleMapsUrl)) {
                await launch(googleMapsUrl);
              }
              if (await canLaunch(appleMapsUrl)) {
                await launch(appleMapsUrl, forceSafariVC: false);
              } else {
                throw "Couldn't launch URL";
              }
            },
          ),
        ],
      ),
    );
  }
}

然后，使用 iOS 模拟器运行应用程序，并单击Launch Maps：

url_launcher 启动地图的屏幕截图，其中指示了用户的当前位置。

现在您可以url_launcher用于网页。

第 6 步 — 启动电话

url_launcher 支持拨打电话。

重新访问home.dart并设置电话号码：

让我们添加一个telephoneNumber：

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  final String telephoneNumber = "01817658822";

  // ...
}

然后我们可以添加一个新的ListTile可以与tel:URL 方案一起使用的：

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  final String telephoneNumber = "01817658822";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          // ...
          ListTile(
            title: Text("Launch Telephone"),
            onTap: () async {
              String telephoneUrl = "tel:$telephoneNumber";

              if (await canLaunch(telephoneUrl)) {
                await launch(telephoneUrl);
              } else {
                throw "Can't phone that number.";
              }
            },
          ),
        ],
      ),
    );
  }
}

然后，使用设备运行应用程序并单击Telephone：

url_launcher 启动电话号码并提示联系人和短信的屏幕截图。

注意：正如url_launcher文档所指出的，tel在没有支持它们的应用程序的模拟器中使用和其他 URL 方案存在限制。

现在您可以url_launcher用于电话号码。

结论

在本文中，您曾经url_launcher启动过一个网页、一张地图和一个电话号码。

如果您想了解有关 Flutter 的更多信息，请查看我们的 Flutter 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁