Flutter中点击ElevatedButton唤起谷歌地图/Waze等导航应用的实现方法

1. 添加依赖 #

首先在pubspec.yaml中引入url_launcher包，用于打开外部应用的URL链接：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.5 # 可替换为官方最新版本

执行flutter pub get完成依赖安装。

2. 导入包 #

在需要实现导航功能的页面导入包：

import 'package:url_launcher/url_launcher.dart';

3. 编写导航唤起逻辑 #

假设你已经获取到当前位置经纬度currentLat, currentLng、目的地经纬度destLat, destLng，可以分别编写对应导航应用的唤起方法：

唤起谷歌地图

Future<void> openGoogleMaps() async {
  final navUri = Uri.parse(
    'https://www.google.com/maps/dir/?api=1&origin=$currentLat,$currentLng&destination=$destLat,$destLng&travelmode=driving'
  );
  if (await canLaunchUrl(navUri)) {
    await launchUrl(navUri);
  } else {
    throw '无法打开谷歌地图应用';
  }
}

唤起Waze

Future<void> openWaze() async {
  final navUri = Uri.parse(
    'waze://?ll=$destLat,$destLng&from=$currentLat,$currentLng&navigate=yes'
  );
  if (await canLaunchUrl(navUri)) {
    await launchUrl(navUri);
  } else {
    // Waze未安装时，自动 fallback 到谷歌地图
    await openGoogleMaps();
  }
}

4. 整合到ElevatedButton中 #

可以直接在按钮回调里唤起指定应用，也可以做弹窗让用户选择导航应用，示例如下：

ElevatedButton(
  onPressed: () async {
    // 示例1：直接唤起谷歌地图
    await openGoogleMaps();

    // 示例2：弹出选择框让用户选导航应用
    // showModalBottomSheet(
    //   context: context,
    //   builder: (ctx) => Column(
    //     mainAxisSize: MainAxisSize.min,
    //     children: [
    //       ListTile(
    //         title: const Text('用谷歌地图导航'),
    //         onTap: () {
    //           Navigator.pop(ctx);
    //           openGoogleMaps();
    //         },
    //       ),
    //       ListTile(
    //         title: const Text('用Waze导航'),
    //         onTap: () {
    //           Navigator.pop(ctx);
    //           openWaze();
    //         },
    //       ),
    //     ],
    //   ),
    // );
  },
  child: const Text('开始导航'),
),

5. iOS平台额外配置 #

如果需要支持iOS唤起Waze等第三方导航应用，需在Info.plist中添加对应的URL Scheme：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>waze</string>
  <string>googlemaps</string>
</array>

Android平台无需额外配置，默认支持打开外部应用链接。

内容的提问来源于stack exchange，提问作者Mostafa Pirhayati