Flutter and CJK font selection 2

I wrote an article Flutter and CJK font selection before. Flutter has been updated since then, I’ll write about the current “CJK font selection”.

The Flutter v0.5.4 do font selection according to the language setting well.

The followings are related updates:

flutter/flutter

• Pass Text/RichText locale along to RenderParagraph
• Fixed an error in the RenderParagraph locale setter
• Add locale parameter to EditableText

flutter/engine

• libtxt: support per-locale fallback font collections
• libtxt: add all styles of a fallback font family to the cache

Default Locale

You can set default Locale to MaterialApp widget.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    locale: Locale("ja", "JP"),
    home: Scaffold(
      appBar: AppBar(title: Text('Locale("ja", "JP")')),
      body: Padding(
        child: Text("今骨累直",
          style: TextStyle(fontSize: 36.0)),
        padding: EdgeInsets.all(16.0),
      ),
    ),
  ));
}

Now, you can omit “new” keywords by Dart 2!

As shown below, the text is rendered in font of each language:

When Locale is changed to “zh” and “CN”, it becomes as follows:

Is it the same text, can you see that the shape depends on the language?

Set locale to TextStyle

You can set Locale to each Text via TextStyle.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('locale to TextStyle')),
      body: new DefaultTextStyle(
        child: Padding(
          child: new Column(
            children: <Widget>[
              Text("ja_JP: 今骨累直",
                style: TextStyle(locale: Locale("ja", "JP"))),
              Text("zh_CN: 今骨累直",
                style: TextStyle(locale: Locale("zh", "CN"))),
            ],
          ),
          padding: EdgeInsets.all(16.0),
        ),
        style: TextStyle(fontSize: 36.0, color: Colors.black87),
      ),
    ),
  ));
}

Note: Unfortunately, on iOS it does not work properly. iOS renders with the higher priority font by language setting. For users, it will be rendered in their language, so it will not be a big problem.

With this update, Flutter became easier to use in Japan. The evolution of Flutter is fast, so I’m very satisfied!