Issue while trying to build a chat widget with wrapping long text

Question

My widget shows a chat conversation.

It display the user's avatar and the rest of the information as a row. On the right side of the row, It display a column of two items: the first item is a row of two items (long name or ID of the user and the last message date with the right arrow) and the second item of the column is the last message that could span to multilines.

It is probably easier to look at my (current layout in action:

As you can see I could managed to fit everything in place despite my many tries.

I'd like the user's name or ID to span over multiple line, the date to be stuck on the right and the message to span over multiple line (3 at max, overflowing with an ellipsis).

Help's greatly appreciated in advance.

My code is as follows:

@override
  Widget build(BuildContext context) {
    return Card(
        margin: const EdgeInsets.all(10),
        child: Padding(
            padding: const EdgeInsets.all(10),
            child: FutureBuilder(
                future: shokaze.User.getFromId(userId),
                builder: (context, snapshot) {
                  if (snapshot.hasError) {
                    return Text("Error: ${snapshot.error}");
                  } else if (!snapshot.hasData) {
                    return const Center(child: CircularProgressIndicator());
                  }
                  final user = snapshot.data;
                  return Row(children: [
                    UserAvatar(user: user),
                    Column(children: [
                      Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              userId,
                              overflow: TextOverflow.ellipsis,
                            ),
                            //const Spacer(),
                            Wrap(spacing: 12, // space between two icons
                                children: [
                                  Text(Format.ago(
                                      mostRecentMessage.creationDate)),
                                  const Icon(Icons.arrow_forward_ios), // icon-2
                                ])
                          ]),
                      Text(mostRecentMessage.message, maxLines: 3),
                    ])
                  ]);
                })));
  }

Answer 1

Whenever you are using overflow property of Text Widget inside a Column or Row Widget which have infinite height and width, you must wrap Expanded or Flexible Widget (According to your needs) to your Text Widget which lets Text Widget know that it should expand and cover the available space. A similar question has been answered with multiple answers : - Text Overflowing in a Row, Flutter.

In your code wrap Column and Row Widget which contain the Text Widget with Expanded or Flexible Widget.

Since Expanded or Flexible Widget will occupy free space you need to give them Fixed Size.

Modified Sample Code : -

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatefulWidget {
  const MyStatelessWidget({super.key});

  @override
  State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}

class _MyStatelessWidgetState extends State<MyStatelessWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
            margin: const EdgeInsets.all(20),
            child: Padding(
                padding: const EdgeInsets.all(10),
                child: SizedBox(
                  height: 200,
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        const CircleAvatar(
                          child: Icon(Icons.person),
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        Flexible(
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Flexible(
                                  child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        const Flexible(
                                          child: Text(
                                            "Userd ID : - LoremIpsum",
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                        //const Spacer(),
                                        Wrap(
                                            spacing:
                                                12, // space between two icons
                                            children: const [
                                              Text(
                                                "Date : - 21/01/2023",
                                                overflow: TextOverflow.ellipsis,
                                                maxLines: 2,
                                              ),
                                              Icon(Icons
                                                  .arrow_forward_ios), // icon-2
                                            ])
                                      ]),
                                ),
                                const SizedBox(
                                  height: 10,
                                ),
                                const Text(
                                  "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.",
                                  maxLines: 3,
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ]),
                        ),
                        const SizedBox(
                          width: 30,
                        )
                      ]),
                ))),
      ),
    );
  }
}

Output : -

Answer 2

you can use auto_size_text library and use AutoSizeText Widget with specific maxLines in Flexible like this :

Flexible(
            child: AutoSizeText(
              'Text...',
              maxLines: 2,
            ),
          )