How to wrap row items in a card with flutter

I fixed your code with the following changes:

  • Removed Row widget inside Wrap.

  • Removed Expanded widget.

  • Add the property maxLines to your Text widget.

           Widget _buildCategories() {
              return Card(
                  margin: const EdgeInsets.only(top: 20.0),
                  child: Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Column(
                      children: <Widget>[
                        Text(
                          'Categories',
                          style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
                        ),
                        Wrap(
                          children: <Widget>[
                            _checkBox('Gaming'),
                            _checkBox('Sports'),
                            _checkBox('Casual'),
                            _checkBox('21 +'),
                            _checkBox('Adult'),
                            _checkBox('Food'),
                            _checkBox('Club'),
                            _checkBox('Activities'),
                            _checkBox('Shopping')
                          ],
                        )
                      ],
                    ),
                  ));
            }
    
            Widget _checkBox(String category) {
              return Column(
                    children: <Widget>[
                      Text(
                        '$category',
                        maxLines: 1,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontFamily: 'MonteSerrat'),
                      ),
                      Checkbox(
                        value: false,
                        onChanged: (value) {
                          // We will update the value to the firebase data here
                          print('updated value to: $value');
                        },
                      )
                    ],
                  );
            }
          } 
    

Also you can add the properties runSpacing and spacing to your Wrap widget to give more space between your items in horizontal and vertical.

     Wrap(
            runSpacing: 5.0,
            spacing: 5.0,

More info here: https://api.flutter.dev/flutter/widgets/Wrap-class.html

Leave a Comment