2

So, I need to make a Text widget to have an exact number of lines. In android studio, I only need to add property android:Lines = 2 and then the TextView will be 2 lines, regardless of how long the text is (if less than 2 lines, then fill the second line with an empty space) and regardless of what's the user's device font size.

The problem is, I have difficulty in replicating such behavior in flutter dynamically. The screenshot below works only on a particular user device's fontSize, since it uses an exact height (32.0).

new Container(
     height: 32.0,
     child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
               new Expanded(
                    child: new Text('Curry Rice'), maxLines: 2, overflow: TextOverflow.ellipsis))
          ])
 )

enter image description here

The problem arise when user is increasing / decreasing their device's font size, it will make the fixed-height container's doesn't work anymore.

enter image description here

So, any idea how to replicate android:Lines behavior in flutter Text widget regardless of the user's device text size?

UPDATE: Added comprehensive code for better context

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // final wordPair = new WordPair.random();
    return new MaterialApp(
        title: 'App Title',
        theme:
            new ThemeData(primaryColor: Colors.white, accentColor: Colors.blue),
        home: new Scaffold(
            appBar: new AppBar(
              title: new Text('App Title'),
              actions: <Widget>[
                new IconButton(icon: new Icon(Icons.list), onPressed: null),
              ],
            ),
            body: new Center(
                child: new Padding(
                    padding: new EdgeInsets.all(16.0),
                    child: new TestWidget()))));
  }
}

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
        width: 150.0,
        child: new Card(
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new Image.asset(
                'assets/thumb2.jpg',
                color: Colors.red,
              ),
              new InkWell(
                  onTap: () {
                    // _showMenuDescription(context);
                  },
                  child: new Padding(
                      padding: new EdgeInsets.all(8.0),
                      child: new Column(
                        children: <Widget>[
                          new Container(
                            height: 32.0,
                            child: new Column(
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: <Widget>[
                                  new Expanded(
                                    child: new Text(
                                        'Curry Rice With Tandoori Chicken and Sunny Side Fried Egg',
                                        maxLines: 2,
                                        overflow: TextOverflow.ellipsis),
                                  )
                                ]),
                          ),
                          new Container(height: 8.0),
                          new Row(
                            children: <Widget>[
                              new Expanded(
                                child: new Text(
                                  'BBQ Sauce',
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: new TextStyle(color: Colors.black45),
                                ),
                              ),
                              new Padding(
                                  padding: new EdgeInsets.only(left: 8.0),
                                  child: new Text(
                                    '20,000',
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    textAlign: TextAlign.end,
                                    style: new TextStyle(
                                        color: const Color(0xffffa000)),
                                  ))
                            ],
                          ),
                        ],
                      ))),
            ],
          ),
        ));
  }
}
2
  • Have you got any solution on it ?? , please let me know Sep 19, 2019 at 13:06
  • @RavindraKushwaha turns out it's not possible to do so. since there's no minLines property. I think you need to calculate manually using MediaQuery or something. Sep 21, 2019 at 11:46

1 Answer 1

1

The problem is that you are setting a finite height for your column. And that height is not enough to display 2 lines with this text style.

Increase the column height or remove that constraint entirely should solve the problem.

5
  • of course it's not enough. as i said, since I can't make it "2 lines with whatever the device's text size scale is". To do that, I need to set the height value to be dynamic, which is the question I asked. Mar 17, 2018 at 11:17
  • if i increase the column height, when the user's device text size is small, the blank space becomes too big compared to the text. if I remove the initial height, when there's only 1 line of text, the space at the second line will not be there Mar 17, 2018 at 11:18
  • think it's like android:Lines property. which makes a text as 2 lines, whatever the size is. Mar 17, 2018 at 11:19
  • removing the height makes it dynamic. Mar 17, 2018 at 13:57
  • removing it throws an exception since i put it inside a column. please take a look at my update. I put a more comprehensive code, not just a short snippet. thanks. Mar 18, 2018 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.