Flutter text overflow with trailing container in Row widget

Viewed 30

In below code I'm getting Text Overflow, but what I need is, if text is to large it should fade in before the view text.

ExpansionTile(
    leading: Wrap(
      spacing: DynamicSize.Azwidth(30),
      children: [
        Icon(
          Icons.menu_rounded,
          color: Color(0xFFE0E0E0),
        ),
        SvgPicture.asset('images/fire.svg'),
      ],
    ),
    title: Text(
      'Foam Rolling',
      style: TextStyle(
        fontSize: DynamicSize.Azheight(16),
        fontWeight: FontWeight.w500,
        fontFamily: 'DMSans',
        color: Color(0xFF193669),
      ),
    ),
    children: [
      Padding(
        padding: EdgeInsets.only(
            left: DynamicSize.Azwidth(97), right: DynamicSize.Azwidth(24)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              child: Row(
                children: [
                  SvgPicture.asset('images/bullet.svg'),
                  SizedBox(width: DynamicSize.Azwidth(16)),
                  Text(
                    'Foam Rolling Front Hip !!!!!!!!!!!!!!!!!!',
                    overflow: TextOverflow.fade,
                    maxLines: 1,
                    softWrap: false,
                  ),
                ],
              ),
            ),
            GestureDetector(
              onTap: () {},
              child: Row(
                children: [
                  Text('View'),
                  Icon(
                    Icons.arrow_forward_ios_rounded,
                    size: DynamicSize.Azheight(13),
                  ),
                ],
              ),
            )
          ],
        ),
      )
    ],
  );

The Output of above code is :

enter image description here

Their is a container widget after exclamation in the text. I even tried wrapping the text widget that overflows with Expanded widget as well as Flexible widget. But the text as well as the bullet point before the text gets invisible.

1 Answers

Wrap inner row with Row and Text with Flexible widget.

children: [
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        child: Row(
          children: [
            Flexible(
              child: Text(
                'Foam Rolling Front Hip !!!!!!!!!sdssssssssssssssss!!!!!!!!!',
                overflow: TextOverflow.fade,
                maxLines: 1,
                softWrap: true,
              ),
            ),
          ],
        ),
      ),
Related