如何在 Flutter 中为 Material Icons 和 Font Awesome Icons 使用相同的大小？

Question

我在我的应用程序中使用 Material Icons 和 Font Awesome Icons，试图使它们的大小相同。我不知道 Material Icons 是否有填充，但对我来说它们的大小似乎不同。

相关问题和关于它的 SO 帖子：

• https://stackoverflow.com/a/54933040/9779791
• https://github.com/flutter/flutter/issues/24054
• https://github.com/flutter/flutter/issues/34958

• https://github.com/fluttercommunity/font_awesome_flutter/issues/23

    @override
    Widget build(BuildContext context) {
      return Container(
        width: 24,
        height: 24,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: blueColor,
        ),
        child: Container(
          width: 15,
          height: 15,
          child: Icon(
            iconData,
            color: Colors.white,
          ),
        ),
      );
    }
  }
  

我将Icons.directions_run 和FontAwesomeIcons.mountain 与我的自定义小部件一起使用（我需要它们的圆形背景，欢迎提出建议），但我无法使它们的大小相同。

这是它们在调试绘画中的外观：

我还从Icon 中删除了size，并使用另一个Container 来调整图标大小。这是代码：

class ChallengeDetailIcon extends StatelessWidget {
  const ChallengeDetailIcon({@required this.iconData});

  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24,
      height: 24,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: blueColor,
      ),
      child: Container(
        width: 15,
        height: 15,
        child: Icon(
          iconData,
          color: Colors.white,
        ),
      ),
    );
  }
}

但是没有用。

编辑：试过FaIcon

代码：

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24,
      height: 24,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: blueColor,
      ),
      child: Center(
        child: FaIcon(
          iconData,
          size: 12,
          color: Colors.white,
        ),
      ),
    );
  }
}

尺寸为 15

Answer 1

请注意：[...] 为什么图标没有正确对齐或为什么图标被截断？ # 请使用库提供的 FaIcon 小部件，而不是 Flutter 提供的 Icon 小部件。 Icon 小部件假定所有图标都是方形的，但许多 Font Awesome Icons 不是。 [...]

https://pub.dev/packages/font_awesome_flutter

尝试使用FaIcon 而不是Icon 来获得字体真棒

导入'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // Use the FaIcon Widget + FontAwesomeIcons class for the IconData
      icon: FaIcon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }
     );
  }
}

编辑：

第二种解决方案是使用 iconTheme 控制它：

theme: ThemeData.light().copyWith(
        iconTheme: IconThemeData(size: 36.0, color: Colors.black87),
...

https://api.flutter.dev/flutter/widgets/IconTheme-class.html