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

Posted 2023-02-23

【中文标题】如何在 Flutter 中为 Material Icons 和 Font Awesome Icons 使用相同的大小？

【英文标题】：How to use same size for Material Icons and Font Awesome Icons in Flutter?

【发布时间】：2020-09-23 02:52:53

【问题描述】：

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

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

https://***.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

【参考方案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

【讨论】：

谢谢，我不知道有什么问题和解决方案。我试过这个并编辑了我的问题，

是的，IconTheme 也没有运气