Flutter字体管理插件native_flutter_fonts的使用
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
更多关于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,
),
),
),
),
);
}
}