CODEWITHSUNDEEP
flutterflutter-layout
Darshan
Darshan

Reputation: 11659

Text widget not displaying in ListTile flutter

I want to display a profile image in left section, name and company in middle section (one below other) and reviews and ratings in right section inside a ListTile. I was able to display an image, reviews and ratings correctly, but text is not being displayed. I want to achieve this:

enter image description here

The white space between image and ratings is where I want to show the text (name and company, one below other). Not sure what am I missing here.

Code snippet below:

return new ListTile(
      contentPadding: EdgeInsets.all(8.0),
          leading: _getProfilePic(pro),
      //    title: new Text('${pro.fullname}'),
        title: new Column(
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Text('${pro.fullname}')
              ],
            ),
          ],
        ),
    subtitle: Column(children: <Widget>[
      Padding(
        padding: EdgeInsets.all(3.0),
      ),
            new Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Text('${pro.company}', style: TextStyle(fontSize: 12.0),
                ),
              ],
            ),
          ],
    ),
      trailing: new Column(children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            new Text('${pro.reviewCount} reviews'),
          ],
        )
      ],) ,

enter image description here

It seems to me a custom method that return ListView, as below:

Widget buildProList(List pros, BuildContext context) { List proTiles = new List();

pros.forEach((pro) {
  proTiles.add(proTile(pro, context));
});

return new ListView(
  children: proTiles
);

}

And this is it's implementation:

ListTile proTile(Pro pro, BuildContext context) { return new ListTile {

}

Upvotes: 3

Views: 3926

Answers (1)

diegoveloper
diegoveloper

Reputation: 103401

You can check the source code of ListTile to check how it is building the tree. If you read the documentation from ListTile widgets you'll find something like this:

  /// The primary content of the list tile.
    ///
    /// Typically a [Text] widget.
    final Widget title;

    /// Additional content displayed below the title.
    ///
    /// Typically a [Text] widget.
    final Widget subtitle;

    /// A widget to display after the title.
    ///
    /// Typically an [Icon] widget.
    final Widget trailing;

So you have to take in consideration the widgets that you are passing.

Your layout looks to complex, this is an example of how you can build your widget in a very simple way:

    new ListTile(
            contentPadding: EdgeInsets.all(8.0),
            leading: _getProfilePic(pro),
            title: new Text('${pro.fullname}'),
            subtitle: Text('${pro.company}',
              style: TextStyle(fontSize: 12.0),
            ),
            trailing: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber),
                new Text('${pro.reviewCount} reviews'),
              ],
            ),
          ),

Another solution without using ListTile:

  return Row(
        children: <Widget>[
        _getProfilePic(pro),

          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  '${pro.fullname}',
                  overflow: TextOverflow.ellipsis,
                ), 
                new Text(
                  '${pro.company}',
                  style: TextStyle(fontSize: 12.0), 
                ),
              ],
            ),
          ),

          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new StarRating(starCount: 5, rating: pro.rating, color: Colors.amber)
              new Text('${pro.reviewCount} reviews'),
            ],
          )
        ],
      );

Note: Don't forget to check the parent constraints of your child widget

Upvotes: 2

Related Questions