When I use center in a text used in Wrap widget as shown in the code below:

Wrap(
   children: [
     Padding(
       padding: const EdgeInsets.symmetric(
         vertical: 6.0),
       child: Container(
         decoration: BoxDecoration(
           color: Colors.transparent,
           borderRadius: BorderRadius.circular(27),
           border: Border.all(
             color: Colors.grey.withOpacity(0.60)),
         ),
         padding: EdgeInsets.fromLTRB(9,6,9,6),
         child: Center(<--placing this center widget makes the child expand to full width
           child: Text(
             'NTU',
             style: TextStyle(
               color: Colors.white.withOpacity(0.87),
               fontSize: 16.5,
             ),
           ),
         ),
       ),
     )
   ]),

the container expands to the full width as shown below:

What I want is:

But placing a center widget in the child of the Wrap widget seems to make it expand to the full width. Any suggestion on how to make it shrink to the child's width even when the center widget is used? Thank you.

CodePudding user response：

Try giving width to your container,

                          Wrap(
                          children: [
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Container(
                                width: 100,
                                decoration: BoxDecoration(
                                  color: Colors.transparent,
                                  borderRadius: BorderRadius.circular(27),
                                  border: Border.all(color: Colors.grey.withOpacity(0.60)),
                                ),
                                padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
                                child: Center(
                                  child: Text(
                                    'NTU',
                                    style: TextStyle(
                                      color: Colors.black.withOpacity(0.87),
                                      fontSize: 16.5,
                                    ),
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),

CodePudding user response：

Set widthFactor of Center widget to set its width to the child's width multiplied by this factor.

return Wrap(
   children: [
     Padding(
       padding: const EdgeInsets.symmetric(
         vertical: 6.0),
       child: Container(
         decoration: BoxDecoration(
           color: Colors.transparent,
           borderRadius: BorderRadius.circular(27),
           border: Border.all(
             color: Colors.grey.withOpacity(0.60)),
         ),
         padding: const EdgeInsets.fromLTRB(9,6,9,6),
         child: Center(
           widthFactor: 1.5,
           child: Text(
             'NTU',
             style: TextStyle(
               color: Colors.white.withOpacity(0.87),
               fontSize: 16.5,
             ),
           ),
         ),
       ),
     )
   ]),

CodePudding user response：

try this code:

Wrap(
                          children: [
                            Row(
                              children: [
                                Flexible(
                                  child: SizedBox(width: MediaQuery.of(context).size.width),
                                ),
                                Container(
                                width: 100,
                                decoration: BoxDecoration(
                                  color: Colors.transparent,
                                  borderRadius: BorderRadius.circular(27),
                                  border: Border.all(color: Colors.grey.withOpacity(0.60)),
                                ),
                                padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
                                child: Center(
                                  child: Text(
                                    'NTU',
                                    style: TextStyle(
                                      color: Colors.black.withOpacity(0.87),
                                      fontSize: 16.5,
                                    ),
                                  ),
                                ),
                              ),
                        
                                Flexible(
                                  child: SizedBox(width: MediaQuery.of(context).size.width),
                                ),
                              ],
                            ),
                          ],
                        ),