🚀

【Flutter】長いテキストをドット3つ(...)で省略して表示する

2023/01/20に公開

概要

この記事では、FlutterのTextウィジェットで、つぎの画像のように長いテキストをドット3つで省略してする方法について記載しています。
TextOverflow ellipsis

Textウィジェットのoverflowを使う

Textウィジェットで長い文章を省略して表示するには、overflowプロパティを使用します。

サンプルコードは、つぎのようになります。

const Text(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  style: TextStyle(
    fontSize: 20.0,
  ),
  overflow: TextOverflow.ellipsis,
)

TextウィジェットのoverflowプロパティにはTextOverflowを設定できます。
例のように、TextOverflow.ellipsisを設定すると、オーバーフローしたテキストは...と省略して表示されるようになります。

同様のサンプルコードをGitHubに上げていますので、よければ参考にしてください。

https://github.com/aiiro/flutter-implementation-samples

Discussion