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

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 : –