Search code examples
google-mapsdartflutteruiscrollview

How to prevent SliverAppBar from scrolling when touch is focused on another widget


I have a SliverAppBar that I want to be hidden when the user scrolls down on the page. The problem is that I have a Google Map widget that is causing the app bar to move as well, when I only want it to move only when my touch is off the Google Map. Is there a way to prevent this?

@override
Widget build(BuildContext context) {
return SafeArea(
    child: Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        backgroundColor: Colors.transparent,
        elevation: 5.0,
        pinned: false,
        snap: false,
        floating: false,
        expandedHeight: 200,
        flexibleSpace: FlexibleSpaceBar(
          background: Image.asset(
            'assets/events/city.jpeg',
            fit: BoxFit.cover,
          ),
        ),
      ),
      SliverFillRemaining(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  height: 200,
                  width: double.infinity,
                  child: GoogleMap(
                    initialCameraPosition:
                        CameraPosition(target: LatLng(50.0, 50.0)),
                    onMapCreated: (controller) {
                      setState(() {
                        _googleMapController = controller;
                      });
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      )
    ],
  ),
));
}

Solution

  • I found that adding a gestureRecognizer property to GoogleMap and passing in a Factory of type VerticalDragRecognizer allowed it to prevent the SliverAppBar from scrolling. It also works on any kind of scrolling you want for your app. See this for more info about it around the 50 minute mark.

    SliverFillRemaining(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  height: 200,
                  width: double.infinity,
                  child: GoogleMap(
                    gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(
                        () => VerticalDragGestureRecognizer()
                    )),
                    scrollGesturesEngabled: true,
                    initialCameraPosition:
                        CameraPosition(target: LatLng(50.0, 50.0)),
                    onMapCreated: (controller) {
                      setState(() {
                        _googleMapController = controller;
                      });
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      )