skip to Main Content

This is a weired Layout issue I recently occured.

I have tried many different ways to construct all fails.

Here is what I want:

  • In a row;
  • the text should expand to the row;
  • the text has a Container as background, I want the container always fits the text;
  • it’s should expand or soft wrap but when text are not long, the contains should fits the text.

I am now trying like this:

 return Padding(
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Flexible(
              child: Align(
                alignment: Alignment.center,
                child: Container(
                  padding:
                      const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
                  decoration: BoxDecoration(
                    color: PlatformTheme.getMainBkColorSection(context),
                    borderRadius: BorderRadius.circular(9),
                    boxShadow: [
                      BoxShadow(
                          color: isDarkModeOnContext(context)
                              ? const Color.fromARGB(68, 27, 27, 27)
                              : const Color.fromARGB(159, 245, 245, 245),
                          blurRadius: 9,
                          spreadRadius: 5)
                    ],
                  ),
                  child: Text(
                    (msg as types.SystemMessage).text,
                    style: NORMAL_S_TXT_STYLE.copyWith(
                        color: Colors.grey.shade500),
                    textAlign: TextAlign.center,
                    softWrap: true,
                  ),
                ),
              ),
            ),
          ],
        ));

the problem is:

to expand the text, I have to using Expanded or Flexiable in a Row, but everytime I do it, I need a container wrap text provide a bcakground, but it’s always expanded to whole width

Any one knows how to make come true?

2

Answers


  1. replace Flexible as Expanded

    & remove Align & its property you’ve write after Flexible

    child: Align(
                    alignment: Alignment.center,
        
    
    Login or Signup to reply.
  2. I don’t fully get your question, but to make a text fill the width/height of its parent even if the text is long, wrap it with FittedBox.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search