Flutter中如何将呼叫按钮修改为WhatsApp按钮？

只需要修改按钮的显示文本和点击跳转的URL即可，以下是修改后的完整代码：

Row(
  children: [
    Expanded(
      child: ActionButtonWidget(
        buttonName: getTranslatedValue(context, "whatsapp_customer"), // 替换为WhatsApp对应的翻译键
        padding: EdgeInsetsDirectional.only(bottom: 10, end: 5),
        voidCallback: () {
          // 使用WhatsApp的跳转链接，注意手机号需包含国际区号（如+86）
          launchUrlAction("https://wa.me/${order.userMobile}");
          // 若需发送预设消息，可使用此格式：
          // launchUrlAction("https://wa.me/${order.userMobile}?text=Hello%20from%20our%20app");
        },
      ),
    ),
    Expanded(
      child: ActionButtonWidget(
        buttonName: getTranslatedValue(context, "get_customer_direction"),
        padding: EdgeInsetsDirectional.only(bottom: 10, start: 5),
        voidCallback: () {
          launchUrlAction(
              "https://www.google.com/maps/dir/?api=1&destination=${order.customerLatitude},${order.customerLongitude}");
        },
      ),
    ),
  ],
),

关键改动说明 #

• 按钮文本：将原来的"call_to_customer"翻译键替换为你项目中对应WhatsApp功能的翻译键（比如"whatsapp_customer"），如果没有对应翻译，也可以直接写字符串如"WhatsApp联系"。
• 跳转链接：把tel://开头的呼叫链接替换为WhatsApp官方跳转链接https://wa.me/手机号，注意手机号必须包含国际区号（比如中国手机号要写成+8613xxxxxxxxx），如果后端返回的手机号不带区号，需要手动拼接，比如：

  launchUrlAction("https://wa.me/+86${order.userMobile}");
  

• 可选：预设消息：如果需要打开WhatsApp时自动填充消息内容，可在链接后拼接?text=消息内容，注意空格要转义为%20。

内容的提问来源于stack exchange，提问作者Jim Aja