akshathjain / sliding_up_panel

A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!
https://pub.dartlang.org/packages/sliding_up_panel
Other
1.36k stars 379 forks source link

WebView Issues #288

Closed emresakar closed 2 years ago

emresakar commented 2 years ago

Hello,

I am trying to use a WebView inside the panelBuilder. Scrolling up is okay, but when I try to scroll down, cannot scroll in WebView, instead, panel is scrolling down and closing. As a temp solution, I set the isDraggable to false. I am opening and closing panel via a button in header. My panelBuilder function:

                panelBuilder: (controller) {
                  return Container(
                    margin: EdgeInsets.only(top: GenericSizes.iconContainerSize*2),
                    child: Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Flexible(child: WebView(
                            initialUrl: 'https://www.google.com.tr',
                            javascriptMode: JavascriptMode.unrestricted,
                          )),
                        ],
                      ),
                    ),
                  );
                },

and my header:

                header: Container(
                  height: GenericSizes.iconContainerSize * 2,
                  width: MediaQuery.of(context).size.width,
                  decoration: ShapeDecoration(
                    color: Colors.black,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(GenericSizes.buttonBorderRadius),
                          topRight: Radius.circular(GenericSizes.buttonBorderRadius),
                        ),
                        side: BorderSide(color: Color(GenericColors.customRed))),
                  ),
                  child: Center(
                    child:  Container(
                      height: GenericSizes.iconContainerSize,
                      width: GenericSizes.iconContainerSize,
                      decoration: BoxDecoration(
                          color: Colors.black87, borderRadius: BorderRadius.circular(25), border: Border.all(color: Color(GenericColors.customRed), width: GenericSizes.buttonBorderWidth)),
                      child: IconButton(
                        iconSize: GenericSizes.iconSize,
                        icon: const Icon(CustomIcons.magnifying_glass),
                        color: Color(GenericColors.customRed),
                        onPressed: () {
                          if (panelController.isAttached && panelController.isPanelOpen) {
                            panelController.close();
                          } else if (panelController.isAttached && !panelController.isPanelOpen) {
                            panelController.open();
                          }
                        },
                      ),
                    ),
                  ),
                ),

Is there any possible way to disable dragging for panelBuilder, and enable it only for header widget? When header is dragging, whole panel will be moving up or down. Thanks to that, we can fix any scrolling issues that can happen in panel.

Also if WebView is used: Snapping is working a bit weird. While panel is fully opened and WebView is scrolling up, panel closes itself to snapping point. panel: WebView() is not working. Cannot scroll in WebView.

I am not a Flutter expert, maybe I am doing things badly. That is why I wanted to ask you guys, have can I correctly use a WebView widget inside the panel?

Thanks

emresakar commented 2 years ago

I found the solution in WebView. If you are having problems like me, try the code below.

                panel:  Container(
                  margin: EdgeInsets.only(top: GenericSizes.iconContainerSize*2),
                  child: WebView(
                    initialUrl: 'https://www.google.com.tr',
                    javascriptMode: JavascriptMode.unrestricted,
                    gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())),
                  ),
                ),