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]Row内でTextのwidthとfontSizeをOverflowしないように動的に変更する

Posted at

これが作りたい

  • 文字数の予想できないTextIconを要素として持つRow
  • Textは一列で全て見せたい(省略なく)
  • テキストの真横にIconを配置したい(空白なく)
  • Iconのサイズは変えたくない

使うWidget

FittedBox

▼解決する課題

  • 文字数の予想できないTextIconを要素として持つRow
  • Text1は一列で全て見せたい(省略なく)
    今回は省略せずに全ての文字列を表示したいので、親のサイズに応じてテキストを縮小する。
    省略、改行してもいい場合はText widgetのoverflowを指定

BoxConstraints

▼解決する課題

  • テキストの真横にIconを配置したい(空白なく)
  • Iconのサイズは変えたくない
    サイズが指定されていないRowの中でFittedBoxを使うとoverflowの警告が出ます。

    SizedBoxwidthを指定しても良いですが、hightも指定しないと文字サイズが無限に大きくなるためBoxConstraintsを使う。(これに関しては他にもいい方法が有るかも)

デモ

See the Pen Flutter Dynamic Width Demo by Shunsuke Kataoka (@skllll06) on CodePen.

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?