虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

テキストを途中で折り返す

テキストを途中で折り返す

FlutterでテキストがViewからはみ出す時にこんなエラー画面が表示されます。

f:id:superman199323:20181010230152p:plain

その場合、解決策としてViewからはみ出した分だけ改行したいとなったときの実装について話します。

途中で折り返す

このときの折り返し方は下記になります。

new Flexible(
   child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
              new Container(
                   padding: new EdgeInsets.all(5.0),
                   child: new Text(
                      document["title"],
                      softWrap: true,
                      style: new TextStyle(fontWeight: FontWeight.bold),
                      ),
                   ),
               new DefaultTextStyle(
                 style: new TextStyle(color: Colors.black),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 3,
                 child: new Padding(
                     child: new Text(document["description"]),
                     padding: new EdgeInsets.only(top: 10.0),
                 )),
         ],
   ),
)

途中で折り返したりするView対して、softWrap: true, を指定し、maxLines: 3, を指定することでこの事象は解決します。

f:id:superman199323:20181010230459p:plain

Rowを使っていて一部分のテキストだけ折り返したい場合

f:id:superman199323:20181010230612p:plain

例えばこんなレイアウトの場合テキストが長いとエラーになります。

f:id:superman199323:20181010230649p:plain

この場合は途中で折り返したいテキスト部分だけ Expanded でラップし、overflow: TextOverflow.ellipsis, を設定すれば解決します。

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: <Widget>[
      Expanded(
         child: Text(
                "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
                overflow: TextOverflow.ellipsis,
       )),
       Container(
           margin: EdgeInsets.only(right: 5.0),
           child: Icon(Icons.more_horiz),
        )
     ],
),