76
41

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 5 years have passed since last update.

Flutterでのテキストを折り返す

Posted at

Flutterでなにも指定しなければテキストは突き抜けてしまいます。

例えばこんなコード

new Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
      new Container(
           padding: new EdgeInsets.all(5.0),
           child: new Text(
             "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
             style: new TextStyle(fontWeight: FontWeight.bold),
           ),
     ),
     new DefaultTextStyle(
       style: new TextStyle(color: Colors.black),
       overflow: TextOverflow.ellipsis,
       child: new Padding(
            child: new Text("ああああああああああああああああああああああああああああああ"),
            padding: new EdgeInsets.only(top: 10.0),
       )),
  ],
)
スクリーンショット 2018-05-16 14.34.57.png

Flexibleを使う

Flexible を使うと中のテキストをその中のWidgetをラップするのでテキストが改行されずに表示されるようになります。


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),
                 )),
         ],
   ),
)
スクリーンショット 2018-05-16 14.39.59.png

maxLines: 3, みたいな指定もすると3行だけ表示して残りは ... みたいなこともしてくれます。

76
41
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
76
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?