如何在Flutter中增加/配置图标的权重/粗体(FontWeight)

np8igboo  于 2023-05-30  发布在  Flutter
关注(0)|答案(4)|浏览(612)

我有一个图标(返回图标是具体的)在我的Flutter应用程序。它看起来更轻。我想让它大胆/增加重量出于某种原因。

Container(
    child: Icon(
        Icons.arrow_back,
        color: Color(0xffffffff),
    ),
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
    decoration: BoxDecoration(
        color: Color(0xff03b673),
        borderRadius: BorderRadius.all(Radius.circular(100.0)),
    ),
)

找不到关于它的任何线程/文档。

ijxebb2r

ijxebb2r1#

这个问题很老了,但我希望它能帮助到一些人。
之前:

Icon(
  CupertinoIcons.exclamationmark_circle,
  color: Colors.red,
  size: 16.0,
)

之后(使用FontWeight):

Text(
  String.fromCharCode(CupertinoIcons.exclamationmark_circle.codePoint),
  style: TextStyle(
    inherit: false,
    color: Colors.red,
    fontSize: 16.0,
    fontWeight: FontWeight.w700,
    fontFamily: CupertinoIcons.exclamationmark_circle.fontFamily,
    package: CupertinoIcons.exclamationmark_circle.fontPackage,
  ),
)

当然,你的图标应该支持不同的权重。我的示例中的图标只支持2个权重:

  1. thin <= FontWeight.w500
  2. thick >= FontWeight.w600
gfttwv5a

gfttwv5a2#

图标size

Container(
child: Icon(
    Icons.arrow_back,
    color: Color(0xffffffff),
    size: 24.0
 ),
 padding: EdgeInsets.all(10.0),
 margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
 decoration: BoxDecoration(
    color: Color(0xff03b673),
    borderRadius: BorderRadius.all(Radius.circular(100.0)),
 ),
)

目前,我认为图标上没有fontWeight属性。你可以从fluttericon.com导入自定义图标,当你在字体下导入它时,你可以在pubspec.yaml中设置字体粗细:

flutter:
 fonts:
 - family: MyIcon
  fonts:
    - asset: lib/fonts/iconfont.ttf
      weight: 400

完整的步骤遵循这篇漂亮的文章:https://developpaper.com/flutter-taste-1-3-step-use-custom-icon/

nnt7mjpx

nnt7mjpx3#

如果您的意思是要更改图标的权重
从Flutter 3.10.0及以上版本开始:
Material design 3是在Flutter中实现的,这样你就可以很容易地指定图标的权重,就像这个例子一样:

Icon(Icons.star_outline,weight: 10)
k3fezbri

k3fezbri4#

您可以通过指定图标大小来完成此操作。

Container(
    child: Icon(
        Icons.arrow_back,
        size: 20.0,
        color: Color(0xffffffff),
    ),
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
    decoration: BoxDecoration(
        color: Color(0xff03b673),
        borderRadius: BorderRadius.all(Radius.circular(100.0)),
    ),
)

相关问题