所以我现在正在开发 flutter 移动应用程序一段时间了,我想探索 flutter web,现在我尝试添加自定义字体,但它没有显示自定义字体。
我已经添加了所有依赖项,并为字体创建了一个单独的文件夹,并将其添加到 pubspec.yaml 中,就像我在 flutter mobile 中所做的那样。
我的 main.dart
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("Dextroxd",
style: TextStyle(
fontSize: 36.0,
fontFamily: 'CookieFam',
color: Colors.white,
fontWeight: FontWeight.w500
)),
centerTitle: true,
),
);
}
}
我的酒吧规范
description: An app built using Flutter for web
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0 <3.0.0'
flutter:
fonts:
- family: CookieFam
fonts:
- asset: assets/Cookie-Regular.ttf
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_runner: ^1.6.2
build_web_compilers: ^2.1.0
pedantic: ^1.7.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
在字体文件夹中添加字体,并在 pubspec.yaml 中添加,例如参考给定的图像
字体文件夹:
pubspec.yaml
现在对于网络添加assets
文件夹中的 web 部分并添加以下 JSON 文件,名称为 web/assets/FontManifest.json
[
{
"family": "MuliBold",
"fonts": [
{
"asset": "fonts/Muli-Bold.tff"
}
]
},
{
"family": "MuliExtraBold",
"fonts": [
{
"asset": "fonts/Muli-ExtraBold.ttf"
}
]
},
{
"family": "MuliRegular",
"fonts": [
{
"asset": "fonts/Muli-Regular.ttf"
}
]
}
]
现在你的字体已经应用到你的 flutter web 应用程序了,太棒了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)