How to make a scrollable widget like google maps in flutter?

Question

I'm trying to create a scrollable widget like google maps that I can swipe it up and see the entire widget and scroll it. but I can't work with the widget behind the scroll view and it's just the scrollable view with a background map that I can not work with

until now I used a stack to have the scrollable area and used the SingleChildScrollView widget.

Is there a way to do that using flutter?

here is the body of my scaffold

new Stack(
        children: <Widget>[
          new Flex(
            direction: Axis.vertical,
            children: <Widget>[new CustomMap()],
          ),
          new SingleChildScrollView(
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                new Container(
                  // A fixed-height child.
                  height: 520.0,
                ),
                new Container(
                  // Another fixed-height child.
                  color: Colors.green,
                  height: 820.0,
                ),
              ],
            ),
          )
        ],
      ),

Sadly Flutter doesn't ship with BottomSheets which support that behavior. You would have to build it yourself, using `GestureDetector` — boformer, Aug 21 '18 at 08:38
@boformer I think it does? https://flutterdoc.com/bottom-sheets-in-flutter-ec05c90453e7 — Lucas, Aug 21 '18 at 10:10
I tried the GestureDetector and I think it will take some time. do you mean changing the container height on drag update? — Moein Hosseini, Aug 21 '18 at 11:23

score 2 · Answer 1 · answered Nov 14 '19 at 21:51

I did it by using "matrix_gesture_detector" (from here)

but also use some widget that suggested in another thread:

here by @pskink and @AawazGyawali

So first you have to add "matrix_gesture_detector" to your "pubspec.yaml" under "dependencies": matrix_gesture_detector: any

copy & paste the following class into new file under lib folder (for example "zoomable_widget.dart") * from here: https://stackoverflow.com/a/57601929/7052552

code available on my repo

my result on youtube

score 0 · Answer 2 · answered Aug 21 '18 at 10:10

0

Are you looking for a persistant bottom sheet? Try following this: https://flutterdoc.com/bottom-sheets-in-flutter-ec05c90453e7

answered Aug 21 '18 at 10:10

Lucas

2,472
2
18
33

Moein is looking for a specific behavior where you can drag up a semi-expanded bottom sheet to transform it into a full screen sheet with your finger. Kind of like in Google Maps. – boformer Aug 21 '18 at 11:03
I have tried the persistent bottom sheet but it's not what I want. I want to create a page like Google Maps. – Moein Hosseini Aug 21 '18 at 11:18

How to make a scrollable widget like google maps in flutter?

2 Answers2