url_launcher_使用url_launcher插件在Flutter中启动本机URL方案

url_launcher

When developing mobile applications, there’s going to be times when you want to interact with apps outside of your own app. This could be something as simple as opening a web page in Safari, to deep-linking into another application with context.

在开发移动应用程序时，有时需要与自己的应用程序之外的应用程序进行交互。 这可能很简单，就像在Safari中打开网页一样，然后通过上下文将其深层链接到另一个应用程序中。

If this is something you’re looking for, we’re able to do exactly that with the url_launcher plugin! This plugin has 100 health rating on pub.dev and is made by the Google flutter.dev team.

如果您正在寻找这个东西，我们可以使用url_launcher插件来做到这url_launcher ！ 此插件在pub.dev上具有100的健康等级 ，由Google flutter.dev团队开发。

创建一个新的Flutter项目 (Creating a new Flutter project)

As always, we’ll start off by setting up a new project and adding the plugin:

与往常一样，我们将从建立一个新项目并添加插件开始：

# New Flutter project
$ flutter create flut_url_launcher

# Open this up inside of VS Code
$ cd flut_url_launcher && code .

添加URL启动器插件 (Adding the URL Launcher plugin)

Head over to your pubspec.yaml and add the following plugin:

转到您的pubspec.yaml并添加以下插件：

dependencies:
  flutter:
    sdk: flutter

  url_launcher: ^5.2.5

脚手架我们的项目 (Scaffolding our Project)

Our application only requires one page. We’ll go ahead and create a HomePage at home_page.dart.

我们的申请仅需一页。 我们将继续在home_page.dart创建HomePage 。

import 'package:flutter/material.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: () {},
          ),
        ],
      ),
    );
  }
}

Let’s add the HomePage to main.dart:

让我们将HomePage添加到main.dart ：

import 'package:flut_url_launcher/home.dart';
import 'package:flutter/material.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(),
    );
  }
}

使用URL启动器插件 (Using the URL Launcher plugin)

The first thing that we’ll be doing is launching a web page, hence why we’ve got a placeholder ListTile for that.

我们要做的第一件事是启动一个网页，因此为什么要为此添加一个占位符ListTile 。

网页 (Web Pages)

The web page we’ll be launching is google.com. Let’s update our ListTile to be an async function and do the following:

我们将启动的网页是google.com 。 让我们将ListTile更新为async函数，然后执行以下操作：

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';
    }
  },
),

Notice how we’re checking to see if the device canLaunch a particular URL scheme prior to calling the launch function.

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

In this case, we’re calling launch with forceSafariVC, as this makes it launch directly in the application on iOS.

在这种情况下，我们用forceSafariVC调用launch ，因为这使它可以直接在iOS上的应用程序中启动。

If we wanted both iOS and Android to open the web page inside the application (as a WebView, for example), we’d do something like this:

如果我们想让iOS和Android都在应用程序内部打开网页(例如，作为WebView)，我们将执行以下操作：

const url = 'https://google.com';

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

This then gives us a WebView style:

然后，这为我们提供了WebView样式：

Google Maps和Apple Maps (Google Maps and Apple Maps)

What about if you wanted to launch Google or Apple maps? Firstly, let’s define a lat and lng for wherever we want to open.

如果要启动Google或Apple地图怎么办？ 首先，让我们为要打开的位置定义lat和lng 。

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

  // ...
}

If you want to do this in a real application, you may want to take advantage of the Geolocation, for which I wrote about recently: Flutter: Getting a User’s Location with the Geolocator Plugin

如果您想在真实的应用程序中执行此操作，则可能需要利用我最近写过的Geolocation： Flutter：使用Geolocator插件获取用户的位置

We can then create a new ListTile that takes advantage of this:

然后，我们可以创建一个利用此优势的新ListTile ：

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";
    }
  },
),

电话 (Telephone)

Ring ring. Let’s add the functionality to call a phone number from within our app.

戒指响。 让我们添加从应用程序中拨打电话号码的功能。

Let’s add a telephoneNumber:

让我们添加一个telephoneNumber ：

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

  final String telephoneNumber = "01817658822";

  // ...
}

We can then add a new ListTile which can be used with the tel: URL scheme:

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

ListTile(
  title: Text("Telephone"),
  onTap: () async {
    String telephoneUrl = "tel:$telephoneNumber";

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

结语 (Wrap up)

I hope you can see the potential with the url_launcher plugin! We’re able to power up our Flutter app(s) by integrating native experiences across the board.

我希望您可以通过url_launcher插件看到潜力！ 我们能够通过全面集成本机体验来增强Flutter应用程序的功能。

翻译自: https://www.digitalocean.com/community/tutorials/flutter-url-launcher

url_launcher