Dynamically spread text to multiple lines according to their length in flutter

203

Wrap the Column with an Expanded widget

Container(
        alignment: Alignment.center,
        width: double.infinity,
        height: 100.0,
        child: Row(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipOval(
                child: Image.asset(
                  'assets/images/c1.png',
                  fit: BoxFit.cover,
                  width: 69,
                  height: 69,
                ),
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  const Text(
                    '@username',
                    style: TextStyle(color: Colors.white),
                  ),
                  Expanded(
                      child: const Text(
                    'fwegergwefrvgervuhygtfvrcdxddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddne, a very long comment!!!',
                    textAlign: TextAlign.justify,
                    maxLines: 6,
                    overflow: TextOverflow.ellipsis,
                  )),
                ],
              ),
            ),
          ],
        ),
      )
Share:
203
Aryan Shandilya
Author by

Aryan Shandilya

Updated on December 07, 2022

Comments

  • Aryan Shandilya
    Aryan Shandilya over 1 year

    So, I am building this app in flutter where users can comment in upto 150 characters and when I am trying to display it there's this render overflow error because of the length of the string. So, how can I spread the text to multiple lines based on their length and display them accordingly. There's a similar question here but that does not solve my problem. Can I get some help?

    Container(
                    alignment: Alignment.center,
                    width: double.infinity,
                    height: 100.0,
                    child: Row(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: ClipOval(
                            child: Image.asset(
                              'assets/images/c1.png',
                              fit: BoxFit.cover,
                              width: 69,
                              height: 69,
                            ),
                          ),
                        ),
                        Column(
                          // mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const Text(
                              '@username',
                              style: TextStyle(color: Colors.white),
                            ),
                            Expanded(child: const Text('fwegergwefrvgervuhygtfvrcdxddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddne, a very long comment!!!', 
                            textAlign: TextAlign.justify,
                            maxLines: 6,
     overflow: TextOverflow.ellipsis,)),
                          ],
                        ),
                      ],
                    ),
                  ),