Flutter url_launcher：打开网页、邮件、电话和短信的最佳实践

Flutter url_launcher：打开网页、邮件、电话和短信的最佳实践

视频

https://youtu.be/uGT43gZNkyc

https://www.bilibili.com/video/BV1G42EYcE7K/

前言

原文 如何在 Flutter 中使用 url_launcher 打开网页和发送短信

本文介绍了如何在 Flutter 中使用 url_launcher 插件打开网页、拨打电话、发送电子邮件和发送短信，提供详细的步骤和示例代码，帮助开发者提升应用功能。

参考

• https://pub.dev/packages/url_launcher

步骤

依赖包：

pubspec.yaml

dependencies:

  url_launcher: ^6.3.0

IOS：

ios/Runner/Info.plist

        <key>LSApplicationQueriesSchemes</key>
        <array>
            <string>https</string>
            <string>sms</string>
            <string>tel</string>
        </array>

加入你需要的协议头 https sms tel。

Android：

android/app/src/main/AndroidManifest.xml

    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="tel" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="sms" />
        </intent>
    </queries>

android 下加入请求头协议。

launchUrl 调用：

• 打开网址

  Future<void> onOpenUrl(String url, {LaunchMode? mode}) async {
    Uri uri = Uri.parse(url);
    if (!await canLaunchUrl(uri)) {
      throw Exception('Could not launch $url');
    }
    if (!await launchUrl(
      uri,
      mode: mode ?? LaunchMode.platformDefault,
    )) {
      throw Exception('Could not launch $url');
    }
  }

• 编码参数

  String? encodeQueryParameters(Map<String, String> params) {
    return params.entries
        .map((e) =>
            '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
        .join('&');
  }

• 发送邮件

  Future<void> onSendMail(String to, String subject, String body) async {
    final Uri uri = Uri(
      scheme: 'mailto',
      path: to,
      query: encodeQueryParameters(<String, String>{
        'subject': subject,
        'body': body,
      }),
    );
    if (!await canLaunchUrl(uri)) {
      throw Exception('Could not launch $to');
    }
    if (!await launchUrl(uri)) {
      throw Exception('Could not launch $to');
    }
  }

• 发送短信

  Future<void> onSendSMS(String phone, String body) async {
    final Uri uri = Uri(
      scheme: 'sms',
      path: phone,
      queryParameters: <String, String>{
        'body': body,
      },
    );
    if (!await canLaunchUrl(uri)) {
      throw Exception('Could not launch sms $phone');
    }
    if (!await launchUrl(uri)) {
      throw Exception('Could not launch sms $phone');
    }
  }

视图代码：

  Widget _buildView() {
    return Center(
      child: Column(
        children: [
          // url
          ElevatedButton(
            onPressed: () => onOpenUrl("https://baidu.com"),
            child: const Text('打开 baidu.com'),
          ),

          // url app 内打开
          ElevatedButton(
            onPressed: () => onOpenUrl(
              "https://baidu.com",
              mode: LaunchMode.inAppWebView,
            ),
            child: const Text('APP 内，打开 baidu.com'),
          ),

          // url app 内打开
          ElevatedButton(
            onPressed: () => onOpenUrl(
              "https://baidu.com",
              mode: LaunchMode.externalApplication,
            ),
            child: const Text('外部，打开 baidu.com'),
          ),

          // email
          ElevatedButton(
            onPressed: () => onSendMail("[e-mail]", "邮件标题", "邮件正文"),
            child: const Text('发送邮件'),
          ),

          // sms
          ElevatedButton(
            onPressed: () => onSendSMS("[phone]", "短信正文"),
            child: const Text('发送短信'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('url_launcher'),
      ),
      body: _buildView(),
    );
  }

代码

本文配套代码

小结

在本文中，我们详细介绍了 Flutter 中 url_launcher 插件的使用方法，包括如何打开网页、拨打电话、发送电子邮件和发送短信。通过具体的示例和最佳实践，开发者可以轻松实现这些功能，从而提升应用的用户体验。希望本文能为你提供实用的参考，帮助你在 Flutter 开发中高效使用 url_launcher 插件。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

---

猫哥 APP

• SaaS Fast
• Flutter GetX Generator

flutter 学习路径

• Flutter 优秀插件推荐
• Flutter 基础篇1 - Dart 语言学习
• Flutter 基础篇2 - 快速上手
• Flutter 实战1 - Getx Woo 电商APP
• Flutter 实战2 - 上架指南 Apple Store、Google Play
• Flutter 基础篇3 - 仿微信朋友圈
• Flutter 实战3 - 腾讯即时通讯 第一篇
• Flutter 实战4 - 腾讯即时通讯 第二篇

---

© 猫哥
ducafecat.com

end