Flutter自定义字体与样式教程

h691938207 1楼

将字体文件放入assets/fonts目录
配置pubspec.yaml中fonts字段
使用TextStyle应用自定义字体

更多关于Flutter自定义字体与样式教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 2楼

将字体文件放入assets目录；2. 在pubspec.yaml声明字体；3. 使用TextStyle指定 fontFamily 应用字体；4. 示例：const TextStyle(fontFamily: ‘MyFont’, fontSize: 16).

eggper 3楼

在Flutter中，自定义字体和样式是一个常见的需求，可以帮助你为应用创建独特的视觉体验。以下是实现自定义字体和样式的步骤：

1. 添加字体文件

首先，将字体文件（如 .ttf 或 .otf 格式）放入项目的 assets/fonts 目录中。

2. 修改 `pubspec.yaml`

在 pubspec.yaml 文件中添加字体文件的引用：

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: assets/fonts/MyCustomFont-Regular.ttf
        - asset: assets/fonts/MyCustomFont-Bold.ttf
          weight: 700

3. 使用自定义字体

在代码中，你可以通过 TextStyle 来使用自定义字体：

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontFamily: 'MyCustomFont',
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
);

4. 全局设置字体

如果你希望在整个应用中使用自定义字体，可以在 MaterialApp 的 theme 中设置默认字体：

MaterialApp(
  theme: ThemeData(
    fontFamily: 'MyCustomFont',
  ),
  home: MyHomePage(),
);

5. 自定义样式

你还可以通过创建自定义的 TextStyle 来定义不同的文本样式，并在应用中复用：

final TextStyle myTextStyle = TextStyle(
  fontFamily: 'MyCustomFont',
  fontSize: 18,
  color: Colors.blue,
);

Text('Custom Style', style: myTextStyle);