字体资源文件 : ttf 格式的字体资源 ;
Flutter 应用字体资源文件 : 在 Flutter 应用根目录下创建 fonts 目录 , 将下载的 ttf 字体放资源文件在该 fonts 目录下 ;
配置字体资源 : 自定义字体资源需要在 pubspec.yaml 配置文件中配置 , 字体资源配置格式如下 :
fonts:
- family: Schyler
fonts:
- asset: fonts/Schyler-Regular.ttf
- asset: fonts/Schyler-Italic.ttf
style: italic
- family: Trajan Pro
fonts:
- asset: fonts/TrajanPro.ttf
- asset: fonts/TrajanPro_Bold.ttf
weight: 700
这里使用 RubikMonoOne-Regular.ttf 字体文件 , 配置如下 :
flutter:
# 配置图片资源
assets:
- images/hunter.png
# 配置字体资源
fonts:
- family: RubikMonoOne
fonts:
- asset: fonts/RubikMonoOne-Regular.ttf
该配置对应的字体文件 RubikMonoOne-Regular.ttf 放在根目录下的 fonts 目录下 ;
在 pubspec.yaml 配置文件中配置完字体资源后 , 点击 " Pub get " 按钮 , 同步资源 ;
显示如下内容后 , 说明资源同步成功 ;
D:\001_Programs\004_Flutter\flutter\bin\flutter.bat --no-color pub get
Running "flutter pub get" in flutter_cmd... 0.7s
Process finished with exit code 0
全局应用字体 : 在 MaterialApp 根节点的 theme 字段值的 ThemeData 组件中的 fontFamily 字段设置字体 , 这里设置在 pubspec.yaml 配置文件中配置的 family 标签下的值 “RubikMonoOne” ;
字体配置 :
fonts:
- family: RubikMonoOne
fonts:
- asset: fonts/RubikMonoOne-Regular.ttf
代码示例 :
MaterialApp(
// 设置标题
title: ,
// 设置主题
theme: ThemeData(
// 配置字体
fontFamily: "RubikMonoOne"
),
// 设置界面主组件
home: ,
)
局部应用字体 : 在 Text 的 style 字段设置文本风格 , TextStyle 类型组件的 fontFamily 可以设置字体 ;
代码示例 :
Text(
"StatefulWidget 页面生命周期",
style: TextStyle(
fontFamily: "RubikMonoOne"
),
),
完整代码示例 :
import 'package:flutter/material.dart';
import 'package:flutter_cmd/GesturePage.dart';
import 'package:flutter_cmd/ResourcePage.dart';
import 'package:flutter_cmd/StatelessWidgetPage.dart';
import 'package:flutter_cmd/WidgetLifeCyclePage.dart';
import 'AppLiftCyclePage.dart';
import 'LauncherPage.dart';
import 'LayoutPage.dart';
import 'StatefulWidgetPage.dart';
import 'ThemePage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// 设置标题
title: 'Flutter Demo',
// 设置主题
theme: ThemeData(
// 配置字体
fontFamily: "RubikMonoOne",
// 配置主题颜色
primarySwatch: Colors.blue,
),
// 设置界面主组件
home: Scaffold(
// 设置标题栏
appBar: AppBar(
title: Text("路由与导航"),
),
// 设置界面主体组件
body: RouteNavigator(),
),
// 配置路由
routes: <String, WidgetBuilder>{
"StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),
"StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),
"LayoutPage" : (BuildContext context) => LayoutPage()
},
);
}
}
class RouteNavigator extends StatefulWidget {
@override
_RouteNavigatorState createState() => _RouteNavigatorState();
}
class _RouteNavigatorState extends State<RouteNavigator> {
@override
Widget build(BuildContext context) {
return Container(
// 居中
alignment: Alignment.center,
child: Column(
children: <Widget>[
RaisedButton(
onPressed: (){
Navigator.pushNamed(context, "LayoutPage");
},
child: Text("通过路由名跳转到页面1"),
),
RaisedButton(
onPressed: (){
Navigator.pushNamed(context, "StatefulWidgetPage");
},
child: Text("通过路由名跳转到页面2"),
),
RaisedButton(
onPressed: (){
Navigator.pushNamed(context, "StatelessWidgetPage");
},
child: Text("通过路由名跳转到页面3"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));
},
child: Text("通过导航跳转到页面1"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage()));
},
child: Text("通过导航跳转到页面2"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage()));
},
child: Text("通过导航跳转到页面3"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => GesturePage()));
},
child: Text("手势检测界面"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => ResourcePage()));
},
child: Text("资源使用界面"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => LauncherPage()));
},
child: Text("第三方应用跳转"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => WidgetLiftCyclePage()));
},
child: Text("StatefulWidget 页面生命周期", style: TextStyle(fontFamily: "RubikMonoOne"),),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => AppLifeCyclePage()));
},
child: Text("应用生命周期"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => ThemePage()));
},
child: Text("主题切换"),
),
],
),
);
}
}
运行效果展示 :
参考资料 :
博客源码下载 :