LoginSignup
29
10

More than 3 years have passed since last update.

@tetsukick(Teppei Kikuchi)inPT AONEKO PELITA KONSULTAN

【Flutter】Text 長い文字列に対応する

Posted at

事象

文字が長いと以下のようにエラーが出てしまいます。

A RenderFlex overflowed by 1312 pixels on the right.

image.png

Swiftなどだと、
UILabelのtruncateパラメータ等で調整します。

解決方法

Textの｀Overflow｀パラメータを使用する。

修正前

                              Text(categoryName,
                                style: TextStyle(
                                  fontFamily: 'SFProDisplay',
                                  color: Color(0xffffffff),
                                  fontSize: 30,
                                  fontWeight: FontWeight.w400,
                                  fontStyle: FontStyle.normal,
                                  letterSpacing: 0.0075,
                                ),
                                textAlign: TextAlign.right,
                              ),
修正後

                              Text(categoryName,
                                style: TextStyle(
                                  fontFamily: 'SFProDisplay',
                                  color: Color(0xffffffff),
                                  fontSize: 30,
                                  fontWeight: FontWeight.w400,
                                  fontStyle: FontStyle.normal,
                                  letterSpacing: 0.0075,
                                ),
                                textAlign: TextAlign.right,
                                overflow: TextOverflow.ellipsis, //ここ！！
                              ),

TextOverflow.ellipsis

image.png

TextOverflow.clip

image.png

TextOverflow.fade

image.png

TextOverflow.visible

image.png

参考記事

29
10
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
Sign upLogin
29
10