0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Flutter TextOverflow.ellipsisのバグに対応する

Posted at

問題点

Flutterでテキストのオーバーフロー処理をellipsis(...)で表現しようとすると、一定の文字列は以下のようにテキストボックスの端より手前で処理が起こってしまいます。

1. Flutter FlutterFlutterFlutterFlutter...

IMG_9667.jpg

2. Flutter-FlutterFlutterFlutterFlutter...

IMG_9668.jpg

3. Flutter✊FlutterFlutterFlutterFlutter...

IMG_9669.jpg

結論

githubのissueより、Charactersを使用してStringを次のようにすれば解決しました!

Characters('任意の文字列').replaceAll(Characters(''), Characters('\u{200B}')).toString();

IMG_9673.jpg

なぜ?

正直なところ私も理解しきれていませんが、CharactersのReadmeに以下の説明があり、

The Characters class exposes a string as a sequence of grapheme clusters. All operations on Characters operate on entire grapheme clusters, so it removes the risk of splitting combined characters or emojis that are inherent in the code-unit based String operations.

意訳すると、Charactersクラスは、文字列を書記素クラスタ(grapheme clusters)として操作するため、コードユニット(code-unit)に基づく文字列操作につきものの、結合文字や絵文字が分割される危険性を排除することができる、らしいです。

書記素クラスタとコードユニット

私が調査した限りでは、ざっくりではありますが、書記素クラスタは「文字の意味上の最小単位・Unicodeを一単語に分けること」であり、一方でコードユニットとはUTF-8やASCIIなどの特定の文字符号化方式における符号化の基本単位をさしている、とのことです。DartのStringはUTF-16のコードユニットで文字列操作をするため、書記素クラスタレベルでの操作ができず絵文字などの特殊なコードユニットが含まれると意図しない結果や動作をすることがあるそうです。

最後に

このバグでかなり詰まっていたので改善することができよかったです。しかし、Dartは文字列ひとつとっても、掘り下げると奥が深く、また完全に理解するのはかなり難しいですね...
何か間違いや指摘がありましたら遠慮なく申し付けください。

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?