0

I want to put a MapWidget into a FlexibleSpaceBar (inside a SliverAppBar inside a NestedScrollView) to show it in a Collapsable Toolbar. My widget tree looks like this:

Scaffold
 |
 |- NestedScrollView
     |
     |- SliverAppBar
     |   |
     |   |- FlexibleSpaceBar
     |       |
     |       |- Map
     |
     |- ListView

The problem is that the NestedScrollViewconsumes all the Gesture events and I cannot use pinch-to-zoom any more on the Map. What's the best way to solve this?

Here's some code:

class ListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<int> list = List<int>.generate(10, (i) => i + 1);
    return NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
              expandedHeight: 250.0,
              floating: true,
              pinned: true,
              snap: false,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Second Screen'),
                background: MapWidget(),
              )),
        ];
      },
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index) {
          int item = list[index];
          return Text('item $item');
        },
      ),
    );
  }
}
luckyhandler
  • 10,651
  • 3
  • 47
  • 64

1 Answers1

0

If you are using GoogleMap as your MapWidget, perhaps this can help:

gestureRecognizers: Set()
  ..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
  ..add(Factory<VerticalDragGestureRecognizer>(
      () => VerticalDragGestureRecognizer())),

With this you can use pan and drag gestures inside your Map Widget.

I looked a bit through the other gesture recognizer options, the closest thing to pinch-to-zoom was ScaleGestureRecognizer but I didn't test it.

Sina Seirafi
  • 2,073
  • 3
  • 15
  • 16