LoginSignup
74
41

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行だけ表示して残りは ... みたいなこともしてくれます。

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