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
replace Flexible as Expanded
& remove Align & its property you’ve write after Flexible
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.