How to retain WebView State in Flutter?

Question

I have a WebView Page which I want to load using the kf_drawer menu options. When I switch from one page to another the state of my WebView isn't remembered and it reloads every time.

This is my code for the Menu page :

   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   import 'package:kelp/bookWB.dart';
   import 'package:kelp/profileWebView.dart';
   import 'package:kf_drawer/kf_drawer.dart';
   import 'classBuilder.dart';
   import 'package:kelp/home.dart';

  class DrawerMenu extends StatefulWidget {
  DrawerMenu({Key key, this.title, this.visibleLogin}) : super(key: key);
  final String title;

  final bool visibleLogin;
  @override
  _DrawerMenuState createState() => _DrawerMenuState();
}

class _DrawerMenuState extends State<DrawerMenu>with TickerProviderStateMixin {
 KFDrawerController _drawerController;

   @override
  void initState() {
    super.initState();

    _drawerController = KFDrawerController(
      initialPage: ClassBuilder.fromString('HomeWebView'),
      items: [
        KFDrawerItem.initWithPage(
          text: Text('HomeWebView', style: TextStyle(color: Colors.white)),
          icon: Icon(Icons.home, color: Colors.white),
          page: HomeWebView(),
        ),
        KFDrawerItem.initWithPage(
          text: Text(
            'Profile',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(Icons.calendar_today, color: Colors.white),
          page:ProfileWebView(),
        ),
        KFDrawerItem.initWithPage(
          text: Text(
            'Book',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(Icons.settings, color: Colors.white),
          page: BookWebView(),
        ),
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:KFDrawer(
          controller: _drawerController,
          header: Align(
            alignment: Alignment.centerLeft,
            child: Container(
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      width: MediaQuery.of(context).size.width * 0.6,
      child: Image.asset(
        'assets/logo.png',
        alignment: Alignment.centerLeft,
      ),
            ),
          ),
          footer: KFDrawerItem(
            text: Text(
      'SIGN IN',
      style: TextStyle(color: Colors.white),
            ),
            icon: Icon(
      Icons.input,
      color: Colors.white,
            ),
          ),
          decoration: BoxDecoration(
            gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color.fromRGBO(255, 25, 255, 1.0), Color.fromRGBO(44, 72, 171, 1.0)],
      tileMode: TileMode.repeated,
            ),
          ),
        ),
    );
  }
} 

Here Class Builder is:

import 'package:kelp/bookWB.dart';
import 'package:kelp/home.dart';
import 'package:kelp/profileWebView.dart';
typedef T Constructor<T>();
final Map<String, Constructor<Object>> _constructors = <String, Constructor<Object>>{};
void register<T>(Constructor<T> constructor) {
  _constructors[T.toString()] = constructor;
}
class ClassBuilder {
  static void registerClasses() {
    register<HomeWebView>(() =>HomeWebView());
    register<ProfileWebView>(() =>ProfileWebView());
    register<BookWebView>(() => BookWebView());
  }
  static dynamic fromString(String type) {
    return _constructors[type]();
  }
}

And this is my WebView Page:

import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:kf_drawer/kf_drawer.dart';

class BookWebView extends KFDrawerContent {
  @override
  _BookWebViewState createState() => _BookWebViewState();
}

class _BookWebViewState extends State<BookWebView>
    with AutomaticKeepAliveClientMixin<BookWebView> {
  final Set<JavascriptChannel> jsChannels = [
    JavascriptChannel(
        name: 'Print', onMessageReceived: (JavascriptMessage message) {}),
  ].toSet();
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      height: MediaQuery.of(context).size.height * 0.8,
      width: MediaQuery.of(context).size.width,
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(
              Icons.menu,
              color: Colors.black,
            ),
            onPressed: widget.onMenuPressed,
          ),
        ),
        backgroundColor: Colors.white,
        body: WebView(
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: 'https://google.com',
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

The initial page keeps getting reloaded every time it is opened. I am using webview_flutter to open my WebViews.

Answer 1

webview_flutter can retain its current session, but what happens here is that the page with the WebView might have been popped. Navigating back to the page loads a new instance of WebView, loading the initialUrl again.

With this limitation on webview_flutter, I've only seen this implemented on third-party WebView plugin like flutter_inappwebview.