How to get rid of pixel overflow by text inside column?

Issue

That is how my problem looks:

I have the following widget tree structure:

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedContainer(duration: Duration()),
        Expanded(
          child: Column(
            children: [
              SomeWidget(),
              Text(
                'Here is some big text causing issue',
              ),
            ],
          ),
        ),
        SomeOtherWidget(),
      ],
    );
  }
}

When I expand the property of AnimatedContainer I get pixel overflow of text shown here.

How can I solve that issue?

Setting parameter of overflow and softWrap of text is not helping.

Setting minimal second column length is also not helping.

Solution

You can solve this issue in multiple ways.

1. You can wrap the Text widget with FittedBox, which will increase or decrease the size of text to avoid overflow.
2. You can either wrap Text with Expanded.
3. There is the property named ‘softwrap’ in Text widget, set it to true.

Answered By – Rashid Wassan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0