How to wrap row items in a card with flutter
I fixed your code with the following changes:
- Removed
Row
widget insideWrap
. - Removed
Expanded
widget. Add the property
maxLines
to yourText
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