如何在Flutter浮动操作按钮中添加WhatsApp图标

由于Flutter官方内置图标库没有提供WhatsApp专属图标，以下是两种低门槛实现方案：

方案1：用官方现有图标快速实现（无需额外引入图标资源） #

直接用自带的聊天图标搭配WhatsApp品牌色即可快速落地，参考实现代码如下：

Row(
  children: [
    FloatingActionButton(
      child: const Icon(Icons.chat),
      backgroundColor: Colors.green.shade800,
      onPressed: () {
        String url = "https://wa.me/+923045873730/?text=Hello";
        launch(url);
      },
    ),
  ],
)

注意事项： #

• 代码中的launch方法来自url_launcher依赖包，使用前需要先在pubspec.yaml中添加该依赖
• 电话号码需要替换为实际业务号码，text参数可自定义默认发送的消息内容

方案2：使用更贴近WhatsApp官方样式的图标 #

如果对图标还原度要求更高，可以引入font_awesome_flutter依赖包，调用其中的WhatsApp专属图标即可，实现代码如下：

// 先导入包
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

// 组件代码
FloatingActionButton(
  child: const FaIcon(FontAwesomeIcons.whatsapp),
  backgroundColor: const Color(0xFF25D366), // WhatsApp官方品牌色
  onPressed: () {
    String url = "https://wa.me/+923045873730/?text=Hello";
    launch(url);
  },
)

内容的提问来源于stack exchange，提问作者Lungs Care