图片、字体与静态资源管理

学会在 pubspec.yaml 中声明资源,理解 AssetImage、Image.network 和字体配置。

资源图片

资源声明

Flutter 不会自动把 assets 目录里的文件都打包进去,必须在 pubspec.yaml 中声明。声明目录时通常以斜杠结尾,表示包含该目录下资源。

flutter:
  assets:
    - assets/images/
    - assets/icons/

本地图片与网络图片

Image.asset('assets/images/logo.png')

Image.network(
  'https://example.com/banner.png',
  fit: BoxFit.cover,
  errorBuilder: (_, __, ___) => const Icon(Icons.broken_image),
)

图片加载建议

  • 列表中的网络图片要考虑占位图和加载失败状态。
  • 大图不要直接塞原图,移动端要压缩到合适尺寸。
  • 图标优先考虑 Icon 或 SVG,位图图标多分辨率维护成本高。
  • 字体文件会增加包体,项目真正需要时再引入。

官方参考