Ad

Styling And Formatting Text Background And Layout

- 1 answer

I'm using trying to make a dating app style flutter program. I want to display 5 keywords over the top of the user's image as little rounded edge overlays. Currently, the list of words are 1. Expanding off of the profile image and 2. The words are spaced too close together, 3. The background colour blocks of the keywords are like sharp rectangles, I want them to be like rounded rectangles. I hope that makes sense?

Thank you!

   Widget buildKeywords() => Container(
            child: Row(
              children: [
                const SizedBox(width: 8),
                Text(
                  'Keyword 1',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 2',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 3',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 4',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 5',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
              ],
            ),
          );

enter image description here

Ad

Answer

Looks like you have 3 questions:

"1. expanding off of the profile image"

If you want to make it scroll, wrap the Row with a SingleChildScrollView, like so:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row( /* ... */ ),
)

Or if you want them to automatically go into a new line, use Wrap widget instead of Row widget.

"2. the words are spaced too close together"

You can either wrap your Text widgets with Padding widgets, or insert some SizedBox(width: 4) widgets in between those texts.

"3. The background colour blocks of the keywords are like sharp rectangles, I want them to be like rounded rectangles."

To round them, use ClipRRect, or use the Chip widget.

Ad
source: stackoverflow.com
Ad