Can't get text to wrap correctly in Flutter?

Question

I have the following issue

I'm trying to get the text to wrap under the dog type, I tried to wrap the text, flexible but it's not working it's in a row not sure why it's not working here is my code

Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  const Padding(
                    padding: EdgeInsets.only(right: 8.0, bottom: 4.0),
                    child: FaIcon(
                      FontAwesomeIcons.cubes,
                      size: 24,
                      color: primaryColor,
                    ),
                  ),
                  const Text(
                    'Dog Type: ',
                    style: AppStyles.dogProfileBodyLabelStyle,
                    overflow: TextOverflow.ellipsis,
                  ),
                  Text(
                    dogInfo.dogType!.join(", "),
                    style: AppStyles.dogProfileBodyTextStyle,
                    maxLines: 5,
                    softWrap: true,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
              
            ],
          ),

To be clear I want it to wrap under the Dog Type, not like the following

Ravindra S. Patil · Answer 1 · 2021-12-01T13:02:12.893

1

Try below code hope its help to you.Try to add your Inside Row widgets wrap it with Expanded or Flexible refer my answer here or here or here hope its helpful to you

Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Padding(
              padding: EdgeInsets.only(right: 8.0, bottom: 4.0),
              child: Icon(
                Icons.add,
                size: 24,
              ),
            ),
            Text(
            'Dog Type: ',
            overflow: TextOverflow.ellipsis,
          ),
            Expanded(
              child: Text(
                'dogInfo.dogType!.join(", ")dogInfo.dogType!.join(", ")',
                maxLines: 5,
                softWrap: true,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ],
    ),

Result screen->

edited Dec 01 '21 at 13:02

answered Dec 01 '21 at 13:00

Ravindra S. Patil

11,757
3
13
40

So not what I want I want it to wrap under the Dog Type – Almog Dec 01 '21 at 13:01
@AlmogKoren what do you exact want – Ravindra S. Patil Dec 01 '21 at 13:05
It needs to wrap under Dog Type, – Almog Dec 01 '21 at 13:06
you want to display description below of the dog type? – Ravindra S. Patil Dec 01 '21 at 13:07
@RavindraS.Patil I already mentioned the same thing. – iDecode Dec 01 '21 at 13:20
yes, its needs to wrap and then go all the way under – Almog Dec 01 '21 at 13:20

score 0 · Answer 2 · answered Dec 01 '21 at 12:58

0

Wrap

Text(
  dogInfo.dogType!.join(", "),
  ...
)

in an Expanded or Flexible widget:

Expanded(
  child: Text(
    dogInfo.dogType!.join(", "),
    ...
  ),
)

answered Dec 01 '21 at 12:58

iDecode

22,623
19
99
186

that does not work, you get this https://imgur.com/a/WoYhCZK – Almog Dec 01 '21 at 13:00

score 0 · Answer 3 · answered Dec 01 '21 at 13:01

Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              const Padding(
                padding: EdgeInsets.only(right: 8.0, bottom: 4.0),
                child: FaIcon(
                  FontAwesomeIcons.cubes,
                  size: 24,
                  color: primaryColor,
                ),
              ),
              const Text(
                'Dog Type: ',
                style: AppStyles.dogProfileBodyLabelStyle,
                overflow: TextOverflow.ellipsis,
              ),
              Expanded(           //Wrap Text Widget with Expanded Widget
                child: Text(
                       dogInfo.dogType!.join(", "),
                       style: AppStyles.dogProfileBodyTextStyle,
                       maxLines: 5,
                       softWrap: true,
                       overflow: TextOverflow.ellipsis,
                    ),
              ),
            ],
          ),
          
        ],
      ),

or Use RichText Widget..

RichText(
                    text: TextSpan(
                        style: Theme.of(context).textTheme.bodyText1,
                        children: [
                          const TextSpan(text: 'Dog Type: '),
                          TextSpan(
                            text: dogInfo.dogType!.join(", "),
                            style:
                                const TextStyle(color: Color(0xFF003764)),
                          )
                        ]),
                  ),

Can't get text to wrap correctly in Flutter?

3 Answers3