如何使用url launcher插件在Flutter中启动原生URL方案

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

先决条件

要完成本教程，您需要：

  • 下载并安装 Flutter。
  • 下载并安装Android Studio 或 Visual Studio Code。
  • 建议为您的代码编辑器安装插件： 为 Android Studio 安装了 Flutter 和 Dart 插件。 为 Visual Studio Code 安装了 Flutter 扩展。

本教程已使用 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 插件

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

发布规范.yaml 

dependencies:
  flutter:
    sdk: flutter

  url_launcher: ^6.0.3

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

第三步——搭建应用程序

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

用指向 HomePage 的 MaterialApp 替换此文件中的所有内容，该 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';
              }
            },
          ),
        ],
      ),
    );
  }
}

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

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

在这种情况下，我们调用 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 用于网页。

第 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";

  // ...
}

注意：如果你想在实际应用中这样做，你可能想利用地理编码和地理定位器来确定用户的当前位置


然后我们可以添加一个新的 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 用于网页。

第 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 文档所指出的，tel 和其他 URL 方案在没有支持它们的应用程序的模拟器中存在限制。


现在您可以使用 url_launcher 作为电话号码。

结论

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

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

取自“https://cainiaojiaocheng.com/index.php?title=如何使用url_launcher插件在Flutter中启动原生URL方案&oldid=25899”
Powered by MediaWiki