'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?

enter image description here

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