flutterdartflutter-layoutflutterwebviewplugin

I want to detect scrolling in WebView_Flutter and hide the padding


I am using Webview_Flutter. The header of the site overlaps the position of the statusbar and I would like to add padding to avoid this.

This is the process of inserting padding to avoid the statusbar if the webview is opened or if there is a scroll position at the top.

    body: Padding(
          padding: (controller?.getScrollY() == null || controller?.getScrollY() == 0)
              ? EdgeInsets.only(top: height)
              : EdgeInsets.only(top: 0),
          child: Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 0.0),
                      child: WebView(
                        javascriptMode: JavascriptMode.unrestricted,
                        initialUrl: Uri.parse(widget.link).toString(),
                        onWebResourceError: (error) {
                          // print(error.domain);
                        },
                        onWebViewCreated: (controller) {
                          this.controller = controller;
                        },
                        onProgress: (progress) {
                          setState(() {
                            this.progress = progress / 100;
                            progressPercent = progress;
                          });
                        },
                      ),
              

Solution

  • To detect WebView scroll event, you can use the flutter_inappwebview plugin (I'm the author) and implement the InAppWebView.onScrollChanged event.

    However, probably you don't need to add top padding for your WebView. You can set the AppBar.toolbarHeight to 0, so the app bar will have the right height to cover the status bar.

    Here is a full code example with both cases using the current latest version 6 available of the plugin (6.0.0-beta.16):

    import 'package:flutter/foundation.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_inappwebview/flutter_inappwebview.dart';
    
    Future main() async {
      WidgetsFlutterBinding.ensureInitialized();
      if (!kIsWeb &&
          kDebugMode &&
          defaultTargetPlatform == TargetPlatform.android) {
        await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
      }
      runApp(const MaterialApp(home: MyApp()));
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      final GlobalKey webViewKey = GlobalKey();
    
      InAppWebViewController? webViewController;
    
      int scrollY = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              toolbarHeight: 0,
            ),
            body: Padding(
              padding: EdgeInsets.only(top: scrollY <= 0 ? 25 : 0),
              child: Column(
                children: [
                  Expanded(
                    child: InAppWebView(
                      key: webViewKey,
                      initialUrlRequest:
                          URLRequest(url: WebUri("https://github.com/flutter")),
                      onWebViewCreated: (controller) {
                        webViewController = controller;
                      },
                      onScrollChanged: (controller, x, y) {
                        setState(() {
                          scrollY = y;
                        });
                      },
                    ),
                  )
                ],
              ),
            ));
      }
    }
    

    Simulator Screen Recording - iPhone 14 Pro Max - 2022-11-25 at 01 21 15