Flutter如何使用google_fonts插件

我在Flutter项目中想使用google_fonts插件来加载Google Fonts的字体，但不太清楚具体该如何操作。能否详细说明一下如何在pubspec.yaml中添加依赖，以及在代码中如何使用这个插件来加载和应用字体？另外，这个插件是否支持离线使用，还是必须联网才能加载字体？

2 回复

在Flutter中使用google_fonts插件，首先在pubspec.yaml中添加依赖：

dependencies:
  google_fonts: ^4.0.3

然后在代码中导入：

import 'package:google_fonts/google_fonts.dart';

使用方式：

Text('Hello', style: GoogleFonts.lato())

即可应用Google字体。

更多关于Flutter如何使用google_fonts插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用google_fonts插件非常简单，只需几个步骤即可为应用添加Google Fonts提供的丰富字体。

安装插件

在 pubspec.yaml 文件的 dependencies 部分添加：

dependencies:
  google_fonts: ^4.0.4  # 检查最新版本

然后运行 flutter pub get 安装。

基本用法

  1. 直接使用字体：

    Text(
  'Hello Google Fonts',
  style: GoogleFonts.lato(), // 使用Lato字体
),

  2. 自定义样式：

    Text(
  'Custom Style',
  style: GoogleFonts.roboto(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
),

  3. 预加载字体（推荐）： 在 main() 函数中预加载，避免首次使用时的加载延迟：

    void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GoogleFonts.pendingFonts([
    GoogleFonts.lato(),
    GoogleFonts.roboto(),
  ]);
  runApp(MyApp());
}

高级用法

  • 文本主题：在 ThemeData 中全局设置字体：
    ThemeData(
  textTheme: GoogleFonts.latoTextTheme(
    Theme.of(context).textTheme,
  ),
),

注意事项

  • 首次使用字体时会从网络下载，建议预加载关键字体。
  • 插件支持所有Google Fonts，可通过 GoogleFonts.字体名() 调用。
  • 确保应用有网络权限（Android: INTERNET权限，iOS: 配置ATS）。

使用google_fonts插件能快速提升应用的视觉体验，同时保持代码简洁。

回到顶部