Android TextView's Lines equivalent in flutter

Question

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))
          ])
 )

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.

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)),
                                  ))
                            ],
                          ),
                        ],
                      ))),
            ],
          ),
        ));
  }
}

Solution

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.

Comments

[Ravindra Kushwaha]

Have you got any solution on it ?? , please let me know

[Moses Aprico]

@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.

[Moses Aprico]

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.

[Moses Aprico]

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

[Moses Aprico]

think it's like android:Lines property. which makes a text as 2 lines, whatever the size is.

[Rémi Rousselet]

removing the height makes it dynamic.

[Moses Aprico]

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.