How to wrap row items in a card with flutter

Question

I have a card that contains row of items (text and checkbox widgets). The problem is that the card can only fill up limited space each row, but it isn't going to the next line in the row. I tried using the wrap widget but it had no effect. I keep getting this:

As you can see it is not wrapping to the next but trying to fit everything in that one line. Here is my code:

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>[
              Row(
            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 Expanded(
    child: Column(
  children: <Widget>[
    Text(
      '$category',
      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');
      },
    )
  ],
));
 }

Answer 1

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