CODEWITHSUNDEEP
flutterdart
Maisie Brooke
Maisie Brooke

Reputation: 133

styling and formatting text background and layout

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 is 1. Expanding off of the profile image and 2. The words are spaced too close together, 3. The background color 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

Upvotes: 0

Views: 211

Answers (2)

Arlle Brasil
Arlle Brasil

Reputation: 176

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 those items to be horizontally aligned, replace the Wrap with 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),
                ),
                )               
              ],
            ),
          );

Upvotes: 1

WSBT
WSBT

Reputation: 36373

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.

Upvotes: 1

Related Questions