'Flutter Web not respecting run spacing
I have a list of FilterChips in a Wrap widget. The vertical spacing is determined by runSpacing (see code below), but Flutter Web is not respecting this spacing - in fact, the chips are overlaying on top of each other. The spacing appears fine on both Android and iOS. Anyone know what's up?
Wrap widget:
Wrap(
alignment: WrapAlignment.start,
spacing: UIDimen.filterSpacing,
runSpacing: UIDimen.filterVerticalSpacing,
children: model.state.searchedItems.map(
(item) {
bool isSelected = model.state.selectedItems.contains(item);
Filter filter = Filter(item, item, isSelected);
return UIFilter(
filter: filter,
onTap: (key, isSelected) {
model.filterTapped(key, isSelected);
searchableListArgs.onSelected(key, isSelected);
},
);
},
).toList(),
),
UIFilter
class UIFilter extends StatefulWidget {
final Filter filter;
final Function onTap;
final Widget? avatar;
final Color selectedColor;
const UIFilter({Key? key, required this.filter, required this.onTap, this.avatar, this.selectedColor = UIColor.green}) : super(key: key);
@override
State<UIFilter> createState() => _UIFilterState();
}
class _UIFilterState extends State<UIFilter> {
@override
Widget build(BuildContext context) {
return FilterChip(
avatar: widget.avatar,
backgroundColor: UIColor.tan,
selectedColor: widget.selectedColor,
selected: widget.filter.isSelected,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(UIDimen.filterRadius),
),
side: BorderSide(
color: widget.filter.isSelected ? widget.selectedColor : UIColor.border,
width: UIDimen.borderSize,
),
),
label: Text(
widget.filter.name,
style: Theme.of(context).textTheme.bodyText1!.apply(color: UIColor.dark),
),
onSelected: (selected) {
widget.onTap(widget.filter.key, selected);
},
showCheckmark: false,
avatarBorder: CircleBorder(),
);
}
}
I've been running the app using flutter run -d chrome --web-renderer html. This prevents a CORS issue with displaying Firebase Storage images.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

