Wrapping a tile after the tile is filled with the text then break the line

Question

Sorry, if the title is not well explained. Here is the detailed information.

I am trying to implement a tile widget which contains: user image, username, and the text message. In the first line of the tile, I want the text message to fill the entire tile, then break the line. But currently, the entire text message breaks the line after image and username.

Desired (screenshot from twitch app):

Current:

MessageTile Widget:

Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        ClipOval(
          child: Image(
            image: NetworkImage(message.image),
            height: 30,
            width: 30,
          ),
        ),
        const SizedBox(width: 8),
        Text(
          message.username + ': ',
          style: const TextStyle(
            color: CupertinoColors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          message.text,
            style: const TextStyle(
            color: CupertinoColors.white,
          ),
        ),
      ],
    ),
  );
}

Thanks in advance.

Answer 1

I developed just for work around for your problem. But there is a need to develop a package to overcome this issue. Here is my work around;

Widget build(BuildContext context) {
    String text = "sadwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsadwwwwwwwwwwwwwwwwwwwsadwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsadwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsadwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsadwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsadwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwsadwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww";
    double containerWidth = 15;
    double container2Width = 30;
    double textSize = MediaQuery.maybeOf(context)!.size.width;
    print("textSize $textSize");
    textSize -= (containerWidth + container2Width);
    print("textSize $textSize");
    String first = text.substring(0,(textSize / 11).toInt());
    String second = text.substring((textSize / 11).toInt(),text.length);
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Padding(
    padding: const EdgeInsets.all(8.0),
    child: Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        Container(
          width: containerWidth,
          height: 15,
        child: Text(":)")),
        Container(
          width: container2Width,
          height: 15,
        child: Text(
          'timur :',
          style: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        )),
        Text(
          "$first",
            style: const TextStyle(
            color: Colors.black,
          ),
        ),
        Text(
          "$second",
            style: const TextStyle(
            color: Colors.black,
          ),
        ),
        ]
    ),
  ),
        ],
      ),
    );
  }