Flutter开发：寻找粗体上下箭头图标，MdIcons等包未找到

以下是几种实用方案，帮你获取或实现目标粗体上下箭头图标：

1. 用第三方图标包 #

很多Flutter第三方图标库包含丰富的粗体样式图标，比如font_awesome_flutter：

• 在pubspec.yaml添加依赖：

  dependencies:
    font_awesome_flutter: ^最新版本号
  

• 替换你现有代码中的图标：

  return Row(
    children: [
      IconButton(
        onPressed: () {
          _upVoteTapped(upVoted);
        },
        padding: EdgeInsets.zero,
        icon: Icon(
          upVoted
              ? FontAwesomeIcons.solidChevronUp
              : FontAwesomeIcons.chevronUp,
          color: Colors.green,
          size: 40,
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(data.voteCount.toString()),
      ),
      IconButton(
        onPressed: () {
          _downVoteTapped(downVoted);
        },
        padding: EdgeInsets.zero,
        icon: Icon(
          downVoted
              ? FontAwesomeIcons.solidChevronDown
              : FontAwesomeIcons.chevronDown,
          color: Colors.red,
          size: 40,
        ),
      ),
    ],
  );
  

  其中solidChevronUp/solidChevronDown就是粗体样式，未选中状态用普通的chevronUp/chevronDown即可匹配需求。

2. 自定义字体图标 #

如果找不到现成适配的包，可自己制作专属字体图标：

• 下载粗体上下箭头的SVG文件；
• 用图标字体生成工具将SVG转成TTF字体文件；
• 将TTF文件放到项目fonts/目录下；
• 在pubspec.yaml配置字体：

  flutter:
    fonts:
      - family: CustomIcons
        fonts:
          - asset: fonts/CustomIcons.ttf
  

• 通过IconData调用自定义图标：

  Icon(
    IconData(0xe001, fontFamily: 'CustomIcons'),
    color: Colors.green,
    size: 40,
  )
  

  （0xe001是生成工具给出的图标编码，以实际生成值为准）

3. 自定义绘制图标 #

用CustomPaint直接画粗体箭头，完全控制样式细节：

class BoldUpArrow extends StatelessWidget {
  final bool isSelected;
  final Color color;
  final double size;

  const BoldUpArrow({
    super.key,
    required this.isSelected,
    required this.color,
    required this.size,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(size, size),
      painter: _BoldArrowPainter(
        isUp: true,
        color: color,
        isFilled: isSelected,
      ),
    );
  }
}

class _BoldArrowPainter extends CustomPainter {
  final bool isUp;
  final Color color;
  final bool isFilled;

  _BoldArrowPainter({
    required this.isUp,
    required this.color,
    required this.isFilled,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = isFilled ? PaintingStyle.fill : PaintingStyle.stroke
      ..strokeWidth = 3;

    final path = Path();
    final centerX = size.width / 2;
    final startY = isUp ? size.height * 0.6 : size.height * 0.4;
    final endY = isUp ? size.height * 0.2 : size.height * 0.8;

    path.moveTo(centerX, startY);
    path.lineTo(centerX - size.width * 0.3, isUp ? size.height * 0.4 : size.height * 0.6);
    path.moveTo(centerX, startY);
    path.lineTo(centerX + size.width * 0.3, isUp ? size.height * 0.4 : size.height * 0.6);
    path.lineTo(centerX, endY);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant _BoldArrowPainter oldDelegate) {
    return oldDelegate.isUp != isUp ||
        oldDelegate.color != color ||
        oldDelegate.isFilled != isFilled;
  }
}

之后直接在IconButton中使用这个自定义Widget即可。

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