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 · Accepted Answer · 2021-12-01 13:02:12Z

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 1, 2021 at 13:02

answered Dec 1, 2021 at 13:00

Ravindra S. Patil

15.3k5 gold badges22 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Almog Over a year ago

So not what I want I want it to wrap under the Dog Type

Ravindra S. Patil Over a year ago

@AlmogKoren what do you exact want

Almog Over a year ago

It needs to wrap under Dog Type,

Ravindra S. Patil Over a year ago

you want to display description below of the dog type?

iDecode Over a year ago

@RavindraS.Patil I already mentioned the same thing.

|

iDecode · Accepted Answer · 2021-12-01 12:58:18Z

0

Wrap

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

in an Expanded or Flexible widget:

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

answered Dec 1, 2021 at 12:58

iDecode

29.8k26 gold badges151 silver badges254 bronze badges

1 Comment

Almog Over a year ago

that does not work, you get this imgur.com/a/WoYhCZK

Zeeshan Ayaz · Accepted Answer · 2021-12-01 13:01:57Z

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)),
                          )
                        ]),
                  ),

Collectives™ on Stack Overflow

Can't get text to wrap correctly in Flutter?

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related