简介

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

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

前提条件

要完成本教程，您需要：

下载并安装Flutter.
下载并安装Android StudioorVisual Studio代码.
建议为您的代码编辑器安装插件： -Android Studio安装的Flutter和Dart插件。 -为Visual Studio代码安装的Flutter扩展。

本教程使用Ffltter v1.22.2、Android SDK v31.0.2和Android Studio v4.1进行了验证。

第一步-设置项目

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

1flutter create url_launcher_example

导航到新项目目录：

1cd url_launcher_example

使用fltter create将生成一个演示应用程序，其中将显示按钮被点击的次数。

Step 2-添加`url_Launcher`插件

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

1[label pubspec.yaml]
2dependencies:
3  flutter:
4    sdk: flutter
5
6  url_launcher: ^6.0.3

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

第三步--搭建应用程序

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

将此文件中的所有内容替换为指向HomePage的MaterialApp，该HomePage可以在home.dart中找到：

 1[label lib/main.dart]
 2import 'package:flutter/material.dart';
 3import 'package:url_launcher_example/home.dart';
 4
 5void main() {
 6  runApp(MyApp());
 7}
 8
 9class MyApp extends StatelessWidget {
10  @override
11  Widget build(BuildContext context) {
12    return MaterialApp(
13      title: 'URL Launcher',
14      theme: ThemeData(
15        primarySwatch: Colors.deepPurple,
16      ),
17      home: HomePage(),
18    );
19  }
20}

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

 1[label lib/home.dart]
 2import 'package:flutter/material.dart';
 3import 'package:url_launcher/url_launcher.dart';
 4
 5class HomePage extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return Scaffold(
 9      appBar: AppBar(
10        title: Text("URL Launcher"),
11      ),
12      body: Column(
13        children: <Widget>[
14          ListTile(
15            title: Text("Launch Web Page"),
16            onTap: () {},
17          ),
18        ],
19      ),
20    );
21  }
22}

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

第四步-启动网页

url_Launcher支持启动网页。

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

 1[label lib/home.dart]
 2import 'package:flutter/material.dart';
 3import 'package:url_launcher/url_launcher.dart';
 4
 5class HomePage extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return Scaffold(
 9      appBar: AppBar(
10        title: Text("URL Launcher"),
11      ),
12      body: Column(
13        children: <Widget>[
14          ListTile(
15            title: Text("Launch Web Page"),
16            onTap: () async {
17              const url = 'https://google.com';
18
19              if (await canLaunch(url)) {
20                await launch(url, forceSafariVC: false);
21              } else {
22                throw 'Could not launch $url';
23              }
24            },
25          ),
26        ],
27      ),
28    );
29  }
30}

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

然后使用iOS模拟器运行应用，点击【启动网页】：

URL_Launcher使用Google. 启动浏览器的屏幕截图

在本例中，我们调用launch，并将forceSafariVC设置为false。当未指定时，它将使用Safari View Controller。

如果我们希望iOS和Android都在应用程序中打开网页(例如，作为WebView)，我们可以这样做：

 1[label lib/home.dart]
 2import 'package:flutter/material.dart';
 3import 'package:url_launcher/url_launcher.dart';
 4
 5class HomePage extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return Scaffold(
 9      appBar: AppBar(
10        title: Text("URL Launcher"),
11      ),
12      body: Column(
13        children: <Widget>[
14          // ...
15          ListTile(
16            title: Text("Launch Web Page (with Web View)"),
17            onTap: () async {
18              const url = 'https://google.com';
19
20              if (await canLaunch(url)) {
21                await launch(url, forceWebView: true);
22              } else {
23                throw 'Could not launch $url';
24              }
25            },
26          ),
27        ],
28      ),
29    );
30  }
31}

然后用iOS模拟器运行应用程序，点击启动网页(带Web View) ：

URL_Launcher在Webview style. 中使用谷歌启动浏览器的屏幕截图

现在你可以使用url_launcher来浏览网页了。

第五步-启动谷歌地图和苹果地图

url_Launcher支持启动地图。

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

 1[label lib/home.dart]
 2import 'package:flutter/material.dart';
 3import 'package:url_launcher/url_launcher.dart';
 4
 5class HomePage extends StatelessWidget {
 6  final String lat = "37.3230";
 7  final String lng = "-122.0312";
 8
 9  // ...
10}

<$>[备注] 注意： 如果您想在实际应用中执行此操作，您可能需要利用地理编码和地理编码来确定用户的当前location <$>

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

 1[label lib/home.dart]
 2import 'package:flutter/material.dart';
 3import 'package:url_launcher/url_launcher.dart';
 4
 5class HomePage extends StatelessWidget {
 6  final String lat = "37.3230";
 7  final String lng = "-122.0312";
 8
 9  @override
10  Widget build(BuildContext context) {
11    return Scaffold(
12      appBar: AppBar(
13        title: Text("URL Launcher"),
14      ),
15      body: Column(
16        children: <Widget>[
17          // ...
18          ListTile(
19            title: Text("Launch Maps"),
20            onTap: () async {
21              final String googleMapsUrl = "comgooglemaps://?center=$lat,$lng";
22              final String appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";
23
24              if (await canLaunch(googleMapsUrl)) {
25                await launch(googleMapsUrl);
26              }
27              if (await canLaunch(appleMapsUrl)) {
28                await launch(appleMapsUrl, forceSafariVC: false);
29              } else {
30                throw "Couldn't launch URL";
31              }
32            },
33          ),
34        ],
35      ),
36    );
37  }
38}

然后用iOS模拟器运行应用，点击启动地图 ：

URL_Launcher使用用户的当前位置indicated. 启动地图的屏幕截图

现在，您可以在网页中使用url_Launcher。

第六步-启动电话

url_Launcher支持发起电话。

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

让我们添加一个TelephoneNumber：

1class HomePage extends StatelessWidget {
2  final String lat = "37.3230";
3  final String lng = "-122.0312";
4
5  final String telephoneNumber = "01817658822";
6
7  // ...
8}

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

 1[label lib/home.dart]
 2import 'package:flutter/material.dart';
 3import 'package:url_launcher/url_launcher.dart';
 4
 5class HomePage extends StatelessWidget {
 6  final String lat = "37.3230";
 7  final String lng = "-122.0312";
 8
 9  final String telephoneNumber = "01817658822";
10
11  @override
12  Widget build(BuildContext context) {
13    return Scaffold(
14      appBar: AppBar(
15        title: Text("URL Launcher"),
16      ),
17      body: Column(
18        children: <Widget>[
19          // ...
20          ListTile(
21            title: Text("Launch Telephone"),
22            onTap: () async {
23              String telephoneUrl = "tel:$telephoneNumber";
24
25              if (await canLaunch(telephoneUrl)) {
26                await launch(telephoneUrl);
27              } else {
28                throw "Can't phone that number.";
29              }
30            },
31          ),
32        ],
33      ),
34    );
35  }
36}

然后，用设备运行应用程序，点击电话：

URL_Launcher启动带有联系人和SMS. 提示的电话号码的屏幕截图

<$>[备注] 注意： 正如url_Launcher文档所指出的，在没有应用支持的模拟器中，tel等URL方案存在局限性。 <$>

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

结论

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

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

如何使用 url_launcher 插件在 Flutter 中启动本地 URL 方案

简介