文章目錄

• 一、Flutter 自定義字體
• • 1、ttf 字體文件
  • 2、ttf 字體資源配置
  • 3、獲取字體
  • 4、全局使用字體
  • 5、局部使用字體
• 二、完整代碼示例
• 三、相關(guān)資源

一、Flutter 自定義字體

---

1、ttf 字體文件

字體資源文件 : ttf 格式的字體資源 ;

Flutter 應(yīng)用字體資源文件 : 在 Flutter 應(yīng)用根目錄下創(chuàng)建 fonts 目錄 , 將下載的 ttf 字體放資源文件在該 fonts 目錄下 ;

2、ttf 字體資源配置

配置字體資源 : 自定義字體資源需要在 pubspec.yaml 配置文件中配置 , 字體資源配置格式如下 :

fonts:- family: Schylerfonts:- asset: fonts/Schyler-Regular.ttf- asset: fonts/Schyler-Italic.ttfstyle: italic- family: Trajan Profonts:- asset: fonts/TrajanPro.ttf- asset: fonts/TrajanPro_Bold.ttfweight: 700

這里使用 RubikMonoOne-Regular.ttf 字體文件 , 配置如下 :

flutter:# 配置圖片資源assets:- images/hunter.png# 配置字體資源fonts:- family: RubikMonoOnefonts:- asset: fonts/RubikMonoOne-Regular.ttf

該配置對應(yīng)的字體文件 RubikMonoOne-Regular.ttf 放在根目錄下的 fonts 目錄下 ;

3、獲取字體

在 pubspec.yaml 配置文件中配置完字體資源后 , 點擊 " Pub get " 按鈕 , 同步資源 ;

顯示如下內(nèi)容后 , 說明資源同步成功 ;

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

4、全局使用字體

全局應(yīng)用字體 : 在 MaterialApp 根節(jié)點的 theme 字段值的 ThemeData 組件中的 fontFamily 字段設(shè)置字體 , 這里設(shè)置在 pubspec.yaml 配置文件中配置的 family 標(biāo)簽下的值 “RubikMonoOne” ;

字體配置 :

fonts:- family: RubikMonoOnefonts:- asset: fonts/RubikMonoOne-Regular.ttf

代碼示例 :

MaterialApp(// 設(shè)置標(biāo)題title: ,// 設(shè)置主題theme: ThemeData(// 配置字體fontFamily: "RubikMonoOne"),// 設(shè)置界面主組件home: , )

5、局部使用字體

局部應(yīng)用字體 : 在 Text 的 style 字段設(shè)置文本風(fēng)格 , TextStyle 類型組件的 fontFamily 可以設(shè)置字體 ;

代碼示例 :

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 {@overrideWidget build(BuildContext context) {return MaterialApp(// 設(shè)置標(biāo)題title: 'Flutter Demo',// 設(shè)置主題theme: ThemeData(// 配置字體fontFamily: "RubikMonoOne",// 配置主題顏色primarySwatch: Colors.blue,),// 設(shè)置界面主組件home: Scaffold(// 設(shè)置標(biāo)題欄appBar: AppBar(title: Text("路由與導(dǎo)航"),),// 設(shè)置界面主體組件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> {@overrideWidget build(BuildContext context) {return Container(// 居中alignment: Alignment.center,child: Column(children: <Widget>[RaisedButton(onPressed: (){Navigator.pushNamed(context, "LayoutPage");},child: Text("通過路由名跳轉(zhuǎn)到頁面1"),),RaisedButton(onPressed: (){Navigator.pushNamed(context, "StatefulWidgetPage");},child: Text("通過路由名跳轉(zhuǎn)到頁面2"),),RaisedButton(onPressed: (){Navigator.pushNamed(context, "StatelessWidgetPage");},child: Text("通過路由名跳轉(zhuǎn)到頁面3"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));},child: Text("通過導(dǎo)航跳轉(zhuǎn)到頁面1"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage()));},child: Text("通過導(dǎo)航跳轉(zhuǎn)到頁面2"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage()));},child: Text("通過導(dǎo)航跳轉(zhuǎn)到頁面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("第三方應(yīng)用跳轉(zhuǎn)"),),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("應(yīng)用生命周期"),),RaisedButton(onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => ThemePage()));},child: Text("主題切換"),),],),);} }

運行效果展示 :

三、相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15602328 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結(jié)

以上是生活随笔為你收集整理的【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。