Flutter自定义字体插件piki

Flutter自定义字体插件piki_fonts的使用

安装 💻

❗ 在开始使用Piki Fonts之前，必须在您的机器上安装 Flutter SDK。

将piki_fonts添加到您的pubspec.yaml文件中：

dependencies:
  piki_fonts:

安装它：

flutter packages get

持续集成 🤖

Piki Fonts自带了一个由Very Good Workflows驱动的GitHub Actions工作流，但您也可以添加自己的CI/CD解决方案。

默认情况下，每次拉取请求或推送时，CI会格式化、检查代码风格并运行测试。这确保了随着功能的增加或更改，代码保持一致且行为正确。该项目使用Very Good Analysis来执行团队使用的严格分析选项。使用Very Good Workflows强制执行代码覆盖率。

运行测试 🧪

对于首次使用的用户，安装very_good_cli：

dart pub global activate very_good_cli

要运行所有单元测试：

very_good test --coverage

要查看生成的覆盖率报告，可以使用lcov。

# 生成覆盖率报告
genhtml coverage/lcov.info -o coverage/

# 打开覆盖率报告
open coverage/index.html

使用示例

下面是一个简单的示例，展示如何在Flutter应用中使用Piki Fonts插件。

示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      // 设置主题字体为Colus，并指定来自piki_fonts包
      theme: ThemeData(fontFamily: 'Colus', package: 'piki_fonts'),
      home: const Scaffold(
        body: Center(
          // 显示文本，使用设置的主题字体
          child: Text(
            'Hello World!',
            style: TextStyle(fontSize: 34, fontWeight: FontWeight.w100),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义字体插件piki_fonts的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

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

piki_fonts 是一个用于在 Flutter 项目中加载和使用自定义字体的插件。它简化了在 Flutter 应用中引入和管理自定义字体的过程。以下是如何使用 piki_fonts 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 piki_fonts 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  piki_fonts: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入字体文件

将你的自定义字体文件（如 .ttf 或 .otf 文件）放置在项目的 assets/fonts 目录下。如果没有 assets/fonts 目录，可以手动创建一个。

然后，在 pubspec.yaml 文件中声明这些字体文件：

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

3. 使用 `piki_fonts` 插件

在你的 Dart 文件中导入 piki_fonts 插件：

import 'package:piki_fonts/piki_fonts.dart';

然后，你可以使用 PikiFonts 类来加载和使用自定义字体。

4. 加载自定义字体

在 main.dart 文件中，使用 PikiFonts.load 方法加载自定义字体：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PikiFonts.load('MyCustomFont'); // 加载自定义字体
  runApp(MyApp());
}

5. 使用自定义字体

在需要使用自定义字体的地方，使用 TextStyle 并指定 fontFamily：

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

6. 完整示例

以下是一个完整的示例，展示了如何在 Flutter 项目中使用 piki_fonts 插件加载和使用自定义字体：

import 'package:flutter/material.dart';
import 'package:piki_fonts/piki_fonts.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PikiFonts.load('MyCustomFont'); // 加载自定义字体
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'MyCustomFont', // 全局使用自定义字体
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Font Example'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontFamily: 'MyCustomFont',
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Flutter自定义字体插件piki_fonts的使用