Using ListView in Stack on top of FlutterMap widget - Map is not showing

Question

I would like to implement horizontal scrallable ListView widget on top of FlutterMap widget.

When I am using most of widgets, they are displayed in Stack (on top of) that FlutterMap, but as soon as I use ListView, due to unknown height of children items, height is 100% and map is not interactive. When I use shrinkWrap and items are centered, map handle gestures on sides, but it shrinks to content only horizontally.

I tried to use Text widget or Container etc and it works. Only with ListView there is that issue where map cannot handle gestures. I tried to wrap ListView to SizedBox, use shrinkWrap, without luck. Goal is having a map and at bottom part horizontal scrollable icons/boxes, but for now I need anything generated by ListView. Here is a code:

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      FlutterMap(
        mapController: _mapController,
        options: MapOptions(
          center: currentLatLng,
          zoom: _defaultZoomLevel,
        ),
        children: [
          TileLayer(
            minZoom: 2,
            maxZoom: 18,
            backgroundColor: Colors.black,
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: const ['a', 'b', 'c'],
          ),
        ],
      ),
      Positioned.fill(
          child: Align(
              alignment: Alignment.bottomCenter,
              child: ListView(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemExtent: 70.0,
                  children: [
                    const Chip(label: Text('data')),
                    const Chip(label: Text('data')),
                    const Chip(label: Text('data')),
                  ])))
    ]);
  }

I do believe it has to be something with renderer, but I am just not able to find out what. Any help would be appreciate!

EDIT: Here is fixed solution:

@override
  Widget build(BuildContext context) {
    return Stack(fit: StackFit.expand, children: [
      FlutterMap(
        mapController: _mapController,
        options: MapOptions(
          center: currentLatLng,
          zoom: _defaultZoomLevel,
        ),
        children: [
          TileLayer(
            minZoom: 2,
            maxZoom: 18,
            backgroundColor: Colors.black,
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: const ['a', 'b', 'c'],
          ),
        ],
      ),
      Align(
          alignment: Alignment.bottomCenter,
          child: SizedBox(
            height: 50.0,
            child: ListView(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemExtent: 70.0,
                children: [
                  const Chip(label: Text('data')),
                  const Chip(label: Text('data')),
                  const Chip(label: Text('data')),
                ]),
          ))
    ]);
  }

Answer 1

Wrap your Listview in Sizedbox and try to set a height for your ListView.