Home > Mobile >  Scroll-to-top WebView in flutter
Scroll-to-top WebView in flutter

Time:02-15

I'm new to flutter so I'm working my first project and I really need help. Is there a way to make a flottingButton auto scrolling to top of a WebView and not a ListView with flutter. Than you in advance. This is my code:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:webview_flutter/webview_flutter.dart';   

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin{
  WebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Welcome to Flutter',
      home: SafeArea(
       child : WillPopScope(
        onWillPop: () => _exitApp(context),
        child : Scaffold(
          body: Stack(
            children: <Widget> [
                WebView(
                  initialUrl: "https://google.com",
                  zoomEnabled: false,
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (controller){
                    webViewController = controller;
                  },
               
    return true;
  }

}

CodePudding user response:

Scroll to top with WebViewController and floating button only visible after a little scroll

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewApp extends StatefulWidget {

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late WebViewController _controller;
  bool buttonshow = false;

  void scrollToTop(){
    _controller.scrollTo(0, 0);
    floatingButtonVisibility();
  }

  void floatingButtonVisibility() async {
    int y = await  _controller.getScrollY();
    if(y>50){
      setState(() {
        buttonshow = true;
      });
    }else {
      setState(() {
        buttonshow = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body:  WebView(
        initialUrl: 'https://flutter.dev',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        gestureRecognizers: Set()
          ..add(
              Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer()
                ..onDown = (tap) {
                  floatingButtonVisibility();
                }))

      ),
      floatingActionButton: Visibility(
        visible: buttonshow,
        child: FloatingActionButton(
          onPressed: () {
            scrollToTop();
          },
          backgroundColor: Colors.blue,
          child: const Icon(Icons.navigation),
        ),
      ),
    );
  }
}
  • Related