Article Directory
I. Introduction
Are you eager to become a Flutter expert with more tips and best practices? We have great news for you! Flutter from zero to one basic entry to the application line of the whole strategy is waiting for you to join! This column contains all the resources you need to learn Flutter, including code samples and in-depth analysis. The content of the column will continue to be updated, and the price will increase accordingly. Join now and enjoy the best price! In addition, we also have a dedicated discussion group, you can click here to join our discussion group to communicate and learn with other Flutter learners. Let's start our Flutter learning journey today!
When developing Flutter applications, we often need to set the default font of the application to ensure the visual consistency of the application. This article will detail how to set the default font in Flutter and how to use custom fonts.
The focus of this article
- Learn how to set the default font in Flutter
- Learn how to use custom fonts in Flutter
- Master how to implement global font settings in Flutter
Version Information
- Flutter version: 3.10.0 or higher
- Dart SDK version: 3.0.0 or higher
This is the blog published by Xiaoyu Youth on CSDN in 2023. Due to the rampant copyright infringement of the collection station, if you do not see this article on CSDN, please contact me through CSDN, thank you for your support~
2. How to set the default font in Flutter
In Flutter, we can set the default font by modifying the properties of pubspec.yamlthe file and .MaterialApptheme
How to set fonts in Flutter
First, we need to pubspec.yamlimport font files in the file. Here is an example of Google's Roboto font:
flutter:
fonts:
- family: Roboto
fonts:
- asset: fonts/Roboto-Regular.ttf
- asset: fonts/Roboto-Italic.ttf
style: italic
Then, set the default font in the property MaterialAppof the :theme
MaterialApp(
theme: ThemeData(
fontFamily: 'Roboto',
),
);
The above code sets the application's default font to Roboto.
Download the Google Roboto font here https://fonts.google.com/specimen/Roboto
Steps and code samples for global font settings
Next, we'll show how to set the default font in Flutter through an example with real complex business logic. In this example, we'll create a simple application with two pages, each using a default font.
First, we create a new Flutter project and libcreate a new pagesdirectory under the directory. In pagesthe directory, we create two new Dart files: home_page.dartand detail_page.dart.
In home_page.dartthe file, we create a HomePageclass that inherits from StatelessWidget:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('首页'),
),
body: Center(
child: Text('这是首页'),
),
);
}
}
In detail_page.dartthe file, we create a DetailPageclass that also inherits from StatelessWidget:
import 'package:flutter/material.dart';
class DetailPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('详情页'),
),
body: Center(
child: Text('这是详情页'),
),
);
}
}
Then, we main.dartimport these two pages in the file and set the default font in the property MaterialAppof the :theme
import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/detail_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
fontFamily: 'Roboto',
),
home: HomePage(),
routes: {
'/detail': (context) => DetailPage(),
},
);
}
}
The above code sets the application's default font to Roboto and creates two pages that use the default font.
3. Use custom fonts in Flutter
Besides using default fonts, we can also use custom fonts in Flutter. Custom fonts can make our application more personalized, and can also meet special design needs.
Introduction and use of custom fonts
First, we need to add the custom font file to the project. Here we take a MyFontcustom font named as an example. We put MyFont.ttfthe file in the directory of the project fonts, and then pubspec.yamlimport the font in the file:
flutter:
fonts:
- family: MyFont
fonts:
- asset: fonts/MyFont.ttf
We can then use that font in Textthe component's prop:style
Text(
'Hello, Flutter!',
style: TextStyle(
fontFamily: 'MyFont',
),
);
The above code sets the font of the text to MyFont.
Steps and code samples for custom font settings
Next, we'll show how to use custom fonts in Flutter through an example with real complex business logic. In this example, we'll create a simple app with one page that uses a custom font for some of the text.
First, we pagescreate a new Dart file in the directory: custom_font_page.dart.
In custom_font_page.dartthe file, we create a CustomFontPageclass that inherits from StatelessWidget:
import 'package:flutter/material.dart';
class CustomFontPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('自定义字体页面'),
),
body: Center(
child: Text(
'这是使用了自定义字体的文本',
style: TextStyle(
fontFamily: 'MyFont',
),
),
),
);
}
}
Then, we main.dartintroduce this page in the file, and add a navigation button, click this button to jump to this page:
import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/detail_page.dart';
import 'pages/custom_font_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
fontFamily: 'Roboto',
),
home: HomePage(),
routes: {
'/detail': (context) => DetailPage(),
'/custom_font': (context) => CustomFontPage(),
},
);
}
}
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('首页'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('这是首页'),
RaisedButton(
child: Text('跳转到自定义字体页面'),
onPressed: () {
Navigator.pushNamed(context, '/custom_font');
},
),
],
),
),
);
}
}
The above code creates a page with a custom font and adds a navigation button that can be clicked to jump to this page.
Four. Summary
This article details how to set the default font in Flutter, and how to use custom fonts. By setting the default font, we can ensure the visual consistency of the application; by using custom fonts, we can make the application more personalized and meet special design requirements.
I hope this article can help you who are learning Flutter. If you have any questions or suggestions, please leave a message in the comment area.
This is the blog published by Xiaoyu Youth on CSDN in 2023. Due to the rampant copyright infringement of the collection station, if you do not see this article on CSDN, please contact me through CSDN, thank you for your support~
Are you curious about Flutter and want to learn more about it? Then, Flutter from zero to one basic introduction to application launch guide will be your best choice! Here, you can find comprehensive Flutter learning resources, including code samples and in-depth analysis. Are you wondering how to build apps with Flutter? All the answers are in our column! Don't hesitate anymore, the content of the column will continue to be updated, and the price will increase accordingly. Join now and enjoy the best price! Let's explore the world of Flutter together! Want to know more? Click here to view the Flutter Developer 101 Getting Started booklet column guide . In addition, we also have a dedicated discussion group, you can click here to join our discussion group to communicate and learn with other Flutter learners.