[英]Flutter: Custom font family do not get applied
我正在尝试为我的 Flutter 应用程序构建一个“主题”,因此它在整个项目中都是一致的。 所以我想到使用字体Roboto-Regular
、 Roboto-Bold
和Roboto-Medium
。 下面是我的代码
pubspec.yaml
name: customer
description: A new Flutter project.
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
google_fonts: ^0.2.0
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/logo.png
- assets/images/lock_24px.png
- assets/images/email_24px.png
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
fonts:
- family: Roboto
fonts:
- asset: assets/fonts/Roboto-Regular.ttf
- asset: assets/fonts/Roboto-Medium.ttf
- asset: assets/fonts/Roboto-Bold.ttf
- family: Ma Shan Zheng
fonts:
- asset: assets/fonts/MaShanZheng-Regular.ttf
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
Main.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import './pages/login.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Customer App',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
fontFamily: 'Roboto',
textTheme: TextTheme(
headline: TextStyle(fontFamily: 'Roboto-Medium', fontSize: 20.0),
button: TextStyle(fontFamily: 'Roboto-Bold', fontSize: 14.0, letterSpacing: 1.25),
)),
home: LoginPage(),
);
}
}
登录.dart
Container(
margin: EdgeInsets.only(top: 60, left: 25, right: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: SizedBox(
width: double.infinity,
height: 45,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
child: Text("LOGIN",
style: Theme.of(context).textTheme.button,),
),
))
],
),
)
您可以看到我使用了Raised Button
的字体样式。 然而,即使应用了其他样式(例如:字体大小、字母间距), font family
也从未被应用。 为什么是这样?
我建议您使用新制作的可用包GoogleFonts 。 它使使用您想要的字体变得更加容易,并且它们是动态加载的,使您的应用程序更轻巧,并且它们具有您想要使用的 Roboto 字体:
MaterialApp(
theme: ThemeData(
textTheme: GoogleFonts.latoTextTheme(
Theme.of(context).textTheme,
),
),
);
您对自定义字体的声明不清楚。
改变这个:
fonts:
- family: Roboto
fonts:
- asset: assets/fonts/Roboto-Regular.ttf
- asset: assets/fonts/Roboto-Medium.ttf
- asset: assets/fonts/Roboto-Bold.ttf
变成这样:
fonts:
- family: Roboto
fonts:
- asset: assets/fonts/Roboto-Regular.ttf
- asset: assets/fonts/Roboto-Medium.ttf
weight: 600
- asset: assets/fonts/Roboto-Bold.ttf
weight: 700
并像这样称呼它们:
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
fontFamily: 'Roboto',
textTheme: TextTheme(
headline: TextStyle(fontWeight: FontWeight.normal, fontSize: 20.0),
button: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0, letterSpacing: 1.25),
)),
用下面的代码替换 Main.dart 中的代码
headline: TextStyle(fontFamily: 'Roboto',fontWeight: FontWeight.normal,fontSize: 20.0),
button: TextStyle(fontFamily: 'Roboto',fontWeight: FontWeight.bold,fontSize: 14.0, letterSpacing: 1.25),
新年快乐 :)
您已为三种不同的字体类型定义了相同的名称,因此当您致电 Roboto 时,他将不知道您想要哪一种。 例如,当您调用 Roboto-Medium 时,没有定义该名称,只是它的源文件调用 Roboto-Medium.ttf 并且不能直接调用。 尝试为每种字体类型定义一个名称,如下所示:
- family: Roboto-Regular
fonts:
- asset: assets/fonts/Roboto-Regular.ttf
- family: Roboto-Meduim
fonts:
- asset: assets/fonts/Roboto-Medium.ttf
- family: Roboto-Bold
fonts:
- asset: assets/fonts/Roboto-Bold.ttf
之后,您可以通过“Roboto-Medium”在您的代码中调用它们
这里flutter开发网站( https://flutter.dev/docs/cookbook/design/fonts )说的是......
文件夹路径:
awesome_app/
fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf
RobotoMono-Regular.ttf
RobotoMono-Bold.ttf
宣布:
flutter:
fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700
在整个应用程序中使用:
MaterialApp(
title: 'Custom Fonts',
// Set Raleway as the default app font.
theme: ThemeData(fontFamily: 'Raleway'),
home: MyHomePage(),
);
在特定小部件中使用:
Text(
'Roboto Mono sample',
style: TextStyle(fontFamily: 'RobotoMono'),
);
尝试更换
- asset: assets/fonts/Roboto-Regular.ttf
和
- asset: fonts/Roboto-Regular.ttf
当您无法在项目中添加字体时,有两个电源问题:
检查你在 yaml 文件中的缩进。 这很重要,因为 yaml 文件中的空间是有意义的。
从头开始重新加载您的模拟器。 第一次学习 Flutter 时,我坚持了 2 个小时。 重新启动它,库将在您的 yaml 文件中添加字体。 包和
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.