Flutter字体管理插件native_flutter

Flutter字体管理插件native_flutter_fonts的使用

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

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

目前，该插件被以下插件使用：

native_tab_bar
accessible_text_view

安装/设置

将其作为依赖项添加到你的插件或项目的pubspec.yaml文件中。
重要！ 添加到你的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)

resolve 和 resolveOrSystemDefault 函数期望字体权重以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

h691938207 1楼•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,
            ),
          ),
        ),
      ),
    );
  }
}

Flutter字体管理插件native_flutter_fonts的使用