当前位置:网站首页>Example of applying fonts to flutter
Example of applying fonts to flutter
2022-07-06 19:43:00 【Snow pine】
Catalog
Font file download address :https:fonts.google.com
1. The first set pubspec.yaml file :C:\Users\user\StudioProjects\myflutter\pubspec.yaml
2. Entry procedure :C:\Users\user\StudioProjects\myflutter\lib\main.dart
3. There is only one code of local font in each component :fontFamily: 'Zhi_Mang_Xing',
The implementation effect is as follows :
The specific location of the font file :
Sketch Map :
Font file download address :https://fonts.google.com
1. The first set pubspec.yaml file :C:\Users\user\StudioProjects\myflutter\pubspec.yaml
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - 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: 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
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
fonts:
- family: Zhi_Mang_Xing
fonts:
- asset: fonts/Zhi_Mang_Xing/ZhimangXing-Regular.ttf
style: normal
weight: 700 # 100 The integer of
2. Entry procedure :C:\Users\user\StudioProjects\myflutter\lib\main.dart
There is only one main code :fontFamily: 'Zhi_Mang_Xing', Everything else is a floating cloud !!
Take a look at the specific location of the code below :
import 'package:flutter/material.dart';
import 'package:myflutter/basic/text.dart';
String mytitle = ' home page ';
void main(List<String> args) {
return runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 1. First , Program entry flutter Top level components of
return MaterialApp(
title: "hello myflatter", // Title Applied in task manager ;
// The global theme style of the application
theme: ThemeData(
primarySwatch: Colors.blueGrey,
fontFamily: 'Zhi_Mang_Xing', // **** This is today's protagonist , Global font settings !!!!
),
home: my_flutter(title: mytitle), // The main content of the application
debugShowCheckedModeBanner: false // Whether the application displays the main upper corner debugging mark
);
}
}
// ignore: camel_case_types
class my_flutter extends StatelessWidget {
const my_flutter({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
// 2. secondly , Program entry flutter Scaffold components
return Scaffold(
// The head component of the application
appBar: AppBar(
// The middle header of the application
title: Text(title),
// leading It is the icon in the upper corner of the main
leading: IconButton(
onPressed: () {
print('This is home!');
},
icon: const Icon(Icons.view_headline),
),
// The icon group on the right side of the application header ( Multiple icons )
actions: [
// Icon 1
IconButton(
onPressed: () {
print('This is share!');
},
icon: const Icon(Icons.share),
),
// Icon 2
Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: IconButton(
icon: const Icon(Icons.search),
onPressed: () {
print('This is search!');
},
),
),
// Icon 3
IconButton(
onPressed: () {
print('This is more!');
},
icon: const Icon(Icons.more_vert),
)
],
),
// 3. This is the main component entry of the entire application content !!
body: const text_demo(),
);
}
}
3. There is only one code of local font in each component :fontFamily: 'Zhi_Mang_Xing', Everything else is a floating cloud !
RichText There is no such code in the multi text component , The font will not be set , Invalid global font ( Is it a version problem ?), Take a look at the location of the code :
import 'package:flutter/material.dart';
/// Text
/// TestDirection( The text direction )
///
/// TextStyle( Text style )
/// Colors( text color )
/// FontWeight( The font size )
/// FontStyle( Font style )
///
/// TextAlign( Text alignment )
/// TextOverflow( Text overflow )
/// maxLines( Specify the number of lines to display )
///
/// RichText And TextSpan( Declare different styles for a piece of text )
///
class text_demo extends StatelessWidget {
const text_demo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
/// Column Example component , Multiple contents can be passed in ,
/// Use when transferring multiple contents children,child Only one content can be passed in .
return Column(
children: [
const Text(
"Flutter Bring innovation to application development : Just a code base , Can build 、 Testing and release are applicable to mobile phones 、Web、 Beautiful applications for desktop and embedded platforms .",
textDirection:
TextDirection.ltr, // The text direction :ltr yes left to right From left to right ;rtl From right to left
style: TextStyle(
fontSize: 30,
color: Colors.red,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
// decoration: TextDecoration.lineThrough, // Text modification : Center line
decorationColor: Colors.blue,
),
textAlign: TextAlign.right,
maxLines: 3, // The maximum number of lines of text displayed
overflow: TextOverflow.ellipsis, // Text overflow shows three dots
textScaleFactor: 1.5, // Text magnification
),
// Multiline text component RichTixt amount to HTML Of <div></div> label
RichText(
// TextSpan amount to HTML Of <span></span> label
text: const TextSpan(
text: "hello",
style: TextStyle(
fontSize: 40,
color: Colors.deepOrange,
),
// children You can display multiple lines of text .
children: [
TextSpan(
text: "flutter",
style: TextStyle(
fontSize: 40,
color: Colors.blue,
),
),
TextSpan(
text: " Hello world !",
style: TextStyle(
fontSize: 40,
color: Colors.blue,
fontFamily: 'Zhi_Mang_Xing', // **** This is today's protagonist , Local font settings !!!!
),
),
TextSpan(
text: " Hello world !",
style: TextStyle(
fontSize: 40,
color: Colors.blue,
// fontFamily: 'Zhi_Mang_Xing', // **** This is today's protagonist , Local font settings !!!!
),
),
]),
),
],
);
}
}
The implementation effect is as follows :
The specific location of the font file :
边栏推荐
- How to do smoke test
- 深入分析,Android面试真题解析火爆全网
- 从sparse.csc.csr_matrix生成邻接矩阵
- MySQL must know and learn
- Mind map + source code + Notes + project, ByteDance + JD +360+ Netease interview question sorting
- CF960G - Bandit Blues(第一类斯特林数+OGF)
- 理解 YOLOV1 第二篇 预测阶段 非极大值抑制(NMS)
- It's enough to read this article to analyze the principle in depth
- short i =1; I=i+1 and short i=1; Difference of i+=1
- A popular explanation will help you get started
猜你喜欢
腾讯Android面试必问,10年Android开发经验
Tencent Android interview must ask, 10 years of Android development experience
A5000 vGPU显示模式切换
JDBC详解
腾讯T3手把手教你,真的太香了
Carte de réflexion + code source + notes + projet, saut d'octets + jd + 360 + tri des questions d'entrevue Netease
Application of clock wheel in RPC
The "white paper on the panorama of the digital economy" has been released with great emphasis on the digitalization of insurance
接雨水问题解析
Hudi vs Delta vs Iceberg
随机推荐
swagger2报错Illegal DefaultValue null for parameter type integer
时钟轮在 RPC 中的应用
js实现力扣71题简化路径
Hudi vs Delta vs Iceberg
Documents to be used in IC design process
学习探索-无缝轮播图
Interview assault 63: how to remove duplication in MySQL?
LeetCode_格雷编码_中等_89.格雷编码
【翻译】云原生观察能力微调查。普罗米修斯引领潮流,但要了解系统的健康状况仍有障碍...
Introduction to enterprise lean management system
CF960G - Bandit Blues(第一类斯特林数+OGF)
MySQL information schema learning (I) -- general table
蓝桥杯 微生物增殖 C语言
【基础架构】Flink/Flink-CDC的部署和配置(MySQL / ES)
深入浅出,面试突击版
Test Li hi
JDBC details
How to access localhost:8000 by mobile phone
10 schemes to ensure interface data security
Vmware虚拟机无法打开内核设备“\\.\Global\vmx86“的解决方法