How to wrap row items in a card with flutter How to wrap row items in a card with flutter flutter flutter

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://docs.flutter.io/flutter/widgets/Wrap-class.html