Flutter Widget 之package:font_awesome_flutter

274 阅读1分钟

Material Design(材料设计)规范,提供了许多有用的模式 包括一套很棒的图标,但它们并不是唯一的图标。

FontAwesome的图标是真正具标志性的,幸运的是有了font_awesome_flutter包

将它们纳入你的Flutter应用程序,就像1、2、3一样简单

首先,记得Material图标的两个组成部分--包装Icon()和内部的icon_data值,包裹Icon()就至少是一个小部件,这毕竟是Flutter,而InconData值是组成Material图标的特殊字体中的字符

Icon(
    icon: IconData.add,
)

FontAwesome也遵循这一模式,它使用一个IconData值包裹在一个小部件中,与FontAwesome相当的用户界面,使用了一个IconData值的位置参数,并且用FaIcon()小部件取代Icon()小部件

FaIcon(FontAwesomeIcon.plus)

就这样,你的应用程序可以显示FontAwesome提供的成千上万的额外图标。

例如,如果你想把Google G显示为一个图标,这可能对你来说很重要,因为图标根本来说就只是会文本,你可以对它们进行常规的转换

image.png

如改变它们的颜色或改变它们的大小

FaIcon(
    FontAwesomeIcon.pluss,
    color: Colors.orange,
    size: 100,
)

image.png

当然,添加一个语义标签总是会很有帮助的,这样你的应该用程序就可以提供所有人使用

FaIcon(
    FontAwesomeIcon.plus,
    color: Colors.orange,
    semanticLabel: "Google's Logo",
    size: 100,
)

如果想了解有关package:font_awesome_flutter 的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址