styling and formatting text background and layout-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

I think the Chip is what you need. Link: https://api.flutter.dev/flutter/material/Chip-class.html

If you need more than 5 items or that items to be horizontaly aligned, replace the Wrap for a ListView.

 Widget buildKeywords() => Container(
            child: Wrap(
              children: [
                const SizedBox(width: 8),
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 1',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                ),
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 2',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                ),
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label:Text(
                  'Keyword 3',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                )
                ,
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 4',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                )
                ,
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 5',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                )               
              ],
            ),
          );