Flutter Webview save login user session and autofill login data

Question

I am using flutter_inappwebview. I have simple website

• I want to store user session so don't required every time fill the user login data.
• I want to save login data as auto fill.

I have tried with many Webview's libs but I am thinking flutter_inappwebview is good one.

What I have tried so far.

import 'dart:collection';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class InAppWebViewExampleScreen extends StatefulWidget {
  @override
  _InAppWebViewExampleScreenState createState() =>
      _InAppWebViewExampleScreenState();
}

class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;
  InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(
        useShouldOverrideUrlLoading: true,
        mediaPlaybackRequiresUserGesture: false,
      ),
      android: AndroidInAppWebViewOptions(
        useHybridComposition: true,
      ),
      ios: IOSInAppWebViewOptions(
        allowsInlineMediaPlayback: true,
      ));

  late PullToRefreshController pullToRefreshController;
  late ContextMenu contextMenu;
  String url = "";
  double progress = 0;
  final urlController = TextEditingController();

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

    pullToRefreshController = PullToRefreshController(
      options: PullToRefreshOptions(
        color: Colors.blue,
      ),
      onRefresh: () async {
        if (Platform.isAndroid) {
          webViewController?.reload();
        } else if (Platform.isIOS) {
          webViewController?.loadUrl(
              urlRequest: URLRequest(url: await webViewController?.getUrl()));
        }
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(children: <Widget>[
      Expanded(
        child: Stack(
          children: [
            InAppWebView(
              key: webViewKey,
              // contextMenu: contextMenu,
              initialUrlRequest:
                  URLRequest(url: Uri.parse('https://app.myapp.com/login/')),
              // initialFile: "assets/index.html",
              initialUserScripts: UnmodifiableListView<UserScript>([]),
              initialOptions: options,
              pullToRefreshController: pullToRefreshController,
              onWebViewCreated: (controller) {
                webViewController = controller;
              },
              onLoadStart: (controller, url) {
                debugPrint("onLoadStart -->> $url");
                setState(() {
                  this.url = url.toString();
                  urlController.text = this.url;
                });
              },
              androidOnPermissionRequest:
                  (controller, origin, resources) async {
                return PermissionRequestResponse(
                    resources: resources,
                    action: PermissionRequestResponseAction.GRANT);
              },
              shouldOverrideUrlLoading: (controller, navigationAction) async {
                return NavigationActionPolicy.ALLOW;
              },
              onLoadStop: (controller, url) async {
                pullToRefreshController.endRefreshing();
                debugPrint("onLoadStop -->> $url");
                controller.evaluateJavascript(source: '''
                    var email = document.getElementById("username");
                    var password = document.getElementById("password");
                    email.value = "upworktest1";
                    password.value = "mysimplepass";                   
                  ''');

                controller
                    .callAsyncJavaScript(functionBody: "LoginViewModel()")
                    .then((result) {
                  debugPrint("func -->> $result");
                });
                // controller.evaluateJavascript(source: yourCode).then((result) {
                //   debugPrint("func -->> $result");
                // });

                setState(() {
                  this.url = url.toString();
                  urlController.text = this.url;
                });
              },
              onLoadError: (controller, url, code, message) {
                debugPrint("onLoadError -->> $message");
                pullToRefreshController.endRefreshing();
              },
              onProgressChanged: (controller, progress) {
                if (progress == 100) {
                  pullToRefreshController.endRefreshing();
                }
                setState(() {
                  this.progress = progress / 100;
                  urlController.text = url;
                });
              },
              onUpdateVisitedHistory: (controller, url, androidIsReload) {
                debugPrint("onUpdateVisitedHistory -->> $url");
                setState(() {
                  this.url = url.toString();
                  urlController.text = this.url;
                });
              },
              onConsoleMessage: (controller, consoleMessage) {
                debugPrint("onConsoleMessage -->> $consoleMessage");
              },
            ),
            progress < 1.0
                ? LinearProgressIndicator(value: progress)
                : Container(),
          ],
        ),
      ),
    ])));
  }
}

Here I used

 controller.evaluateJavascript(source: '''
                    var email = document.getElementById("username");
                    var password = document.getElementById("password");
                    email.value = "upworktest1";
                    password.value = "mysimplepass";       
                    document.getElementById('loginbutton').click();            
                  ''');

but it does not store email and password values because when I tried to call

 document.getElementById('loginbutton').click();

Its generate error

{message: Uncaught TypeError: Cannot read properties of undefined (reading 'trim'), messageLevel: 3}

Can anyone have done this?