CODEWITHSUNDEEP
flutter
Simou
Simou

Reputation: 742

Flutter: make subtitle text expand to the blank area under the leading widget

I have a ListView in flutter, with ListTiles inside it as items. the leading widget is a circle avatar, the title is a short text, the subtitle is a long text. I want the subtitle's text to expland in the area under the circle avatar, in other words i don't want to have the read under the circle avatar as blank. Check the picture bellow: like shown here

and here is my ListTile code:

class _MessagesListTile extends StatefulWidget {
  _MessagesListTile({
    Key key,
    this.index,
  }) : super(key: key);

  final int index;
  bool isTapped = false;

  @override
  __MessagesListTileState createState() => __MessagesListTileState();
}

class __MessagesListTileState extends State<_MessagesListTile> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        child: Image(image: AssetImage("assets/ic_female.png")),
        radius: 30.0,
      ),
      title: Text(
        "Sender ${widget.index}",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
      ),
      subtitle: Text(
        "A very long message cropped to fit just this area and not overflow so"
        " much to take more and more and more and more and more and more"
        " and more and more and more and more and more and more and more "
        "and more and more and more and more and more and more and more space ",
        overflow: widget.isTapped ? TextOverflow.visible : TextOverflow.ellipsis,
      ),
      trailing: Icon(
         widget. isTapped ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right),
      isThreeLine: widget.isTapped,
      onTap: () {
        setState(() {
          widget.isTapped = !widget.isTapped;
        });
      },
    );
  }
}

Any hint on how to achieve that? i'm open to all solutions, as long as the solution keeps the same layout of the item when closed and open.

Upvotes: 7

Views: 687

Answers (1)

Amine Messabhia
Amine Messabhia

Reputation: 542

I am not sure if this is exactly what you're looking for, or if it helps you, but there is a package I found, there would be some work needed to implement this in a ListTile, but that's a problem for later, here's how it looks like:

enter image description here

And here's the link for the package on pub.dev: drop_cap_text 1.0.7

Upvotes: 5

Related Questions