1

i want to show that some menu is premium, but somehow when text is wrapped, they doesn't lose its width. here is the example

Result:

enter image description here

Here is my code

return ListTile(
  contentPadding: const EdgeInsets.fromLTRB(30, 0, 16, 0),
  title: Row(
    children: [
      Flexible(
          fit: FlexFit.loose,
          child: Text(
            test,
          )),
      Container(
        alignment: Alignment.centerLeft,
        padding:
            const EdgeInsets.symmetric(horizontal: 15),
        decoration:
            cardDecoration(color: AppColors.greyCard),
        child: Text(
          'Premium',
          style: h7(color: AppColors.mainGreen),
        ),
      ),
    ]
  )
);

I do tried to make it with Text.rich, but I can't make it work better than this (sometimes they ddo look ugly

enter image description here

Here is my code:

return ListTile(
    contentPadding: const EdgeInsets.fromLTRB(30, 0, 16, 0),
    title: Row(
      children: [
        Expanded(
          child: Text.rich(TextSpan(
              text: test,
              children: [
                WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: Container(
                    margin: EdgeInsets.only(left: 8),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 15),
                    decoration: cardDecoration(
                        color: Colors.grey[200]),
                    child: Text(
                      'Premium',
                      style: h7(color: AppColors.mainGreen),
                    ),
                  ),
                )
              ])),
        )
      ]
    )
  );
Nur Hazbiy
  • 21
  • 3
  • what is your expected design your code working fine – Ravindra S. Patil Oct 18 '22 at 16:36
  • I am having a similar difficulty. When text is wrapped using `Expanded` or `Flexible`, it consumes the remaining horizontal space within a row, even though the bounds of the text *could* be shrunk horizontally after wrapping. Because of this I've not found a way, within a column, to horizontally center a row that contains wrapped text. I would like a way to have the text wrap, but then after wrapping, reduce the horizontal bounds of the text widget to the minimum possible. – Chuck Batson Dec 24 '22 at 02:00
  • @RavindraS.Patil sorry for my late response, because i ended up not using this kind of approach, but for people that have same issue might need this. my expected design was kinda like first picture, but every row should be something like first row. you can see that the first row of my first picture is different than the others, and what i had in my mind was how to make the other row look something like the first row – Nur Hazbiy Feb 06 '23 at 16:10

0 Answers0