flutter webview with cache for offline usage

Question

Using Flutter 3.16.8,

How can I create a fullscreen WebView that caches content ?

i.e. the WebView shall show previous content if the app is shutdown and restarted offline (i.e. without internet).

How do I do that ?

Currently, I am using the following 3 flutter packages in my pubspec.yaml :

  webview_flutter: ^4.4.4
  webview_flutter_android: ^3.13.2
  webview_flutter_wkwebview: ^3.11.0

Here is the calling of the Webview :

// ...
body: Container(
    color: constants.KARMA_LAMA_PRIMARY_COLOR,
    child: const SafeArea(
        bottom: false,
        child: MyAppWebView(url: constants.MY_URL),
    ,
),
// ...

Here is my code for the Webview :

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:myapp/constants/constants.dart' as constants;
// #docregion platform_imports
// Import for Android features.
import 'package:webview_flutter_android/webview_flutter_android.dart';
// Import for iOS features.
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
// #enddocregion platform_imports

class MyAppWebView extends StatefulWidget {
  final String url;

  const MyAppWebView({super.key, required this.url});

  @override
  State<MyAppWebView> createState() => _MyAppWebView();
}

class _MyAppWebView extends State<MyAppWebView> {
  late final WebViewController _webController;

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

    // #docregion platform_features
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(        
        allowsInlineMediaPlayback: false,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    final WebViewController webController =
        WebViewController.fromPlatformCreationParams(params);

    webController
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(constants.PRIMARY_COLOR)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            debugPrint('WebView is loading (progress : $progress%)');
            if (progress == 100) {
              debugPrint('WebView is loaded.');
            }
          },
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      ) 
      ..loadRequest(Uri.parse(widget.url));

    // #docregion platform_features
    if (webController.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);
      (webController.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }
    _webController = webController;
  }

  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    double width = MediaQuery.of(context).size.width.w;
    // double height = MediaQuery.of(context).size.height.h * 0.8;
    return Container(
      color: Colors.black87,
      alignment: Alignment.topLeft,
      child: WebViewWidget(controller: _webController).build(context),      
    );
  }
}

The Webview works fine - except that there is no caching whatsoever :(