Flutter 自定义字体和图片的使用

最新推荐文章于 2025-10-21 01:41:27 发布

原创最新推荐文章于 2025-10-21 01:41:27 发布 · 689 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Android Flutter框架专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在Flutter应用中使用自定义字体和加载图片，包括配置pubspec.yaml文件、添加字体资产和图片，以及在代码中实际操作的步骤。适合初学者了解基本资源管理技巧。

1.先将自己需要使用的字体和图片放到指定文件夹下面：

2.在 pubspec.yaml 文件下初始化字体和图片：

# 添加图片
assets:
   - assets/images/bg_swms.png
   - assets/images/icon.png


# 添加字体
fonts:
   - family: fzktc
     fonts:
       - asset: assets/fonts/fzktc.TTF

3.初始化完成之后，在代码中实现：

显示图片

class _SplashState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      child: Image.asset(
        "assets/images/icon.png", ///你本地的图片--local picture
        fit: BoxFit.fill,///自动填充页面大小--auto fill page size
      ),
    );
  }

设置字体

class _MyLoginPageState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('测试系统'),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          productName,
          style: TextStyle(fontFamily: 'fzktc', fontSize: 30),
        ),
      ),
    );
  }
}

刚开始学习，日常记录。