Why my Flutter WebView app is running on lower frame rate than a regular browser?

Question

I have made a WebView app for my simple and light local website. It feels very fast and responsive on a regular mobile browser app (Firefox, Chrome, Edge and etc..). But on my Flutter WebView app, it feels like it is running below 30 FPS. Not as smooth and responsive when opened on a regular browser.

The only thing I could find about this issue is using a package called "FlutterDisplayMode", but it didn't do anything.

My main.dart:-

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:connectivity/connectivity.dart';
import 'package:flutter_displaymode/flutter_displaymode.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WebViewScreen(),
    );
  }
}

class WebViewScreen extends StatefulWidget {
  @override
  _WebViewScreenState createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late InAppWebViewController _webViewController;
  bool _hasInternetError = false;

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _hasInternetError
        ? Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Internet connection error"),
                ElevatedButton(
                  onPressed: _reloadApp,
                  child: Text("Try Again"),
                ),
              ],
            ),
          )
        : FutureBuilder<void>(
            future: setHighestRefreshRate(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return InAppWebView(
                  initialUrlRequest: URLRequest(url: Uri.parse("http://192.168.100.201:8080")),
                  onWebViewCreated: (controller) {
                    _webViewController = controller;
                    _setupJavascriptChannel();
                  },
                  onLoadError: (controller, url, code, message) {
                    setState(() {
                      _hasInternetError = true;
                    });
                  },
                );
              } else {
                // Show a loading indicator while setting the refresh rate.
                return Center(child: CircularProgressIndicator());
              }
            },
          ),
    );
  }

  void _setupJavascriptChannel() {
    _webViewController.addJavaScriptHandler(
      handlerName: 'openLink',
      callback: (List<dynamic> args) {
        String url = args.isNotEmpty ? args[0] : null;
        print('Received: ');
        print(url);
        if (url != null) {
          _openLink(url);
        } else {
          print('Received null or empty URL from JavaScript');
        }
      },
    );
  }

  Future<void> _openLink(String url) async {
    try {
      await launch(url);
    } catch (e) {
      print('Error launching URL: $e');
    }
  }

  Future<void> _reloadApp() async {
    // Reload the app
    final bool isConnected = await _checkInternetConnectivity();
    if (isConnected) {
      setState(() {
        _hasInternetError = false;
      });
      // Navigate to initial route to reset the app
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (BuildContext context) => MyApp()),
      );
    }
  }

  Future<bool> _checkInternetConnectivity() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    return connectivityResult != ConnectivityResult.none;
  }

  Future<void> setHighestRefreshRate() async {
  await FlutterDisplayMode.setHighRefreshRate();
  }
}