Flutter字体管理插件native_flutter_fonts的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter字体管理插件native_flutter_fonts的使用

提供了在原生侧(包括Android和iOS)的字体注册表和解析器,以便原生代码可以解析并使用Flutter字体。

自动尝试从Flutter字体资产清单中加载所有字体,并将它们存储在一个单例实例中以便访问。

目前,该插件被以下插件使用:

  • native_tab_bar
  • accessible_text_view

安装/设置

  1. 将其作为依赖项添加到你的插件或项目的pubspec.yaml文件中。
  2. 重要! 添加到你的plugin_name.podspec(插件)或Podfile(应用项目)中。

插件 plugin_name.podspec

Pod::Spec.new do |s|
    ...
    s.dependency 'Flutter'
    s.dependency 'native_flutter_fonts' # 添加在这里
    ...
end

应用 Podfile – 如果你的应用已经使用了一个依赖于native_flutter_fonts pod的插件,则不要添加!

...
target 'Runner' do
    use_frameworks!
    use_modular_headers!
    ...
    pod 'native_flutter_fonts' # 添加在这里
    ...
end
...

Android 使用

Kotlin:

import com.dra11y.flutter.native_flutter_fonts.FlutterFontRegistry
...
/// 如果"MaterialIcons"不在清单中,返回 `null`。
val iconTypeface: Typeface? = FlutterFontRegistry.resolveOrNull("MaterialIcons")

/// 如果"My Font Family"不在清单中,返回默认的Android类型字体,根据给定的粗细和斜体样式。
val myTextTypeface: Typeface = FlutterFontRegistry.resolve("My Font Family", weight = 600, isItalic = false)

iOS 使用

在你的Swift文件中:

import native_flutter_fonts
...

let textFont: UIFont? = FlutterFontRegistry.resolve(family: 'Roboto', size: 14, weight: 400)

let fallbackFont: UIFont = FlutterFontRegistry.resolveOrSystemDefault(family: 'My Font', size: 14, weight: 400)

resolveresolveOrSystemDefault 函数期望字体权重以Flutter FontWeight单位。这些范围从100(细)到400(正常)再到900(超粗),增量为100。

然而,iOS字体权重(CGFloat)范围从-1.0(细)到0.0(正常)再到+1.0(超粗)。

为了在这两者之间进行转换,我们提供了两个方便的函数:

FlutterFontRegistry.flutterWeightFromAppleWeight(_ weight: CGFloat) -> Int

FlutterFontRegistry.appleWeightFromFlutterWeight(_ weight: Int) -> CGFloat

完整示例代码

下面是一个完整的示例代码,展示了如何在Flutter应用中使用native_flutter_fonts插件。

example/lib/main.dart

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Native Flutter Fonts Example'),
        ),
        body: const Center(
          child: AccessibleTextView(
            html: 'This is a test to see if font loading works.',
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


native_flutter_fonts 是一个 Flutter 插件,它允许你在 Flutter 应用中更容易地管理和使用原生平台的字体。通过这个插件,你可以在 Flutter 中直接使用 Android 和 iOS 系统提供的字体,而不需要手动将字体文件添加到 Flutter 项目中。

安装插件

首先,你需要在 pubspec.yaml 文件中添加 native_flutter_fonts 依赖:

dependencies:
  flutter:
    sdk: flutter
  native_flutter_fonts: ^1.0.0

然后运行 flutter pub get 来安装插件。

使用插件

在代码中导入插件:

import 'package:native_flutter_fonts/native_flutter_fonts.dart';

1. 获取系统字体列表

你可以使用 NativeFonts.getSystemFonts() 方法来获取系统中可用的字体列表:

List<String> systemFonts = await NativeFonts.getSystemFonts();
print(systemFonts);

2. 使用系统字体

你可以直接在 TextStyle 中使用系统字体:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontFamily: 'Roboto', // 使用系统字体 'Roboto'
    fontSize: 24,
  ),
);

3. 检查字体是否可用

你还可以检查某个字体是否在系统中可用:

bool isFontAvailable = await NativeFonts.isFontAvailable('Roboto');
print(isFontAvailable ? 'Roboto is available' : 'Roboto is not available');

4. 动态加载字体

如果你需要动态加载字体,可以使用 NativeFonts.loadFont 方法:

bool isFontLoaded = await NativeFonts.loadFont('Roboto');
if (isFontLoaded) {
  // 字体加载成功,可以使用
  Text(
    'Hello, Flutter!',
    style: TextStyle(
      fontFamily: 'Roboto',
      fontSize: 24,
    ),
  );
} else {
  // 字体加载失败
  Text(
    'Failed to load font',
    style: TextStyle(
      fontSize: 24,
    ),
  );
}

注意事项

  • native_flutter_fonts 插件依赖于原生平台的字体管理机制,因此在不同的平台上,可能支持的字体有所不同。
  • 在使用字体时,确保字体名称正确,否则可能会使用默认字体。 0

示例代码

以下是一个完整的示例,展示了如何使用 native_flutter_fonts 插件:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 检查字体是否可用
  bool isFontAvailable = await NativeFonts.isFontAvailable('Roboto');
  
  runApp(MyApp(isFontAvailable: isFontAvailable));
}

class MyApp extends StatelessWidget {
  final bool isFontAvailable;

  const MyApp({Key? key, required this.isFontAvailable}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Native Flutter Fonts Example'),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              fontFamily: isFontAvailable ? 'Roboto' : null,
              fontSize: 24,
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!