Flutter is a popular cross-platform development framework. However, its CJK support looks not so good, CJK characters cannot display correctly in some platforms (e.g. Linux). This article is to explain how to solve the CJK display problem.
Preparation
Before all, you need following things:
- Flutter
- Your Flutter project
- Fonts you need. You need topay more attention to fonts' copyright!
Following article I will take YouYuan.TTC
as sample.
Process
After preparing, we start to fix the problem.
Fist of all, we need to create a folder under your project to storage font files. I use fonts
as sample.
Then, copy your font files into the folder. Command may like:
cp $fontPath/YouYuan.TTC $flutterProj/fonts
After that, we need to edit pubspec.yaml
. You may find following comments:
# 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
#
According the content, it's easy to get that this file is for customizing font configuration.
I modified like this, you can have your different one 😀
fonts:
- family: YouYuanFont
fonts:
- asset: fonts/YouYuan.TTC
# You could add more assets as you want
weight: 700
The final step is that importing your fonts to use. Find the class which extends StatelessWidget
and modify it like this:
class KApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
fontFamily: 'YouYuanFont', // This is what you enter in family in pubspec.yaml
After that, you may find that your project can display CJK correctly.