WebView flutter does not load the page properly

Question

I have created a page in flutter that shows a webpage. I used webview_flutter, but it doesn't load the page properly. It shows the page but only in the 10% of the screen and the other 90% shows the loading symbol. I can slide and watch the entire webpage in the green area.

I tried looking at other Stack Overflow posts, but it seems the package has changed since 2019 because the method they suggest now returns an error.

My code:

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

import 'package:webview_flutter/webview_flutter.dart';

class WebViewContainer extends StatefulWidget {
  const WebViewContainer({super.key});

  @override
  State<StatefulWidget> createState() => _WebViewContainerState();
}

class _WebViewContainerState extends State<WebViewContainer> {
  final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.disabled)
    ..loadRequest(Uri.parse('https://itvlahoya.es/cita-previa'));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Cita Previa ITV"),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

Answer 1

Finally I found other code that allow to show the entire page:

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

import 'package:webview_flutter/webview_flutter.dart';

class WebViewContainer extends StatefulWidget {
  const WebViewContainer({super.key});

  @override
  State<StatefulWidget> createState() => _WebViewContainerState();
}

class _WebViewContainerState extends State<WebViewContainer> {
  var loadingPercentage = 0;
  final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.disabled)
    ..loadRequest(Uri.parse('https://google.com'));

  @override
  void initState() {
    super.initState();
    controller
      ..setNavigationDelegate(NavigationDelegate(onPageStarted: (url) {
        setState(() {
          loadingPercentage = 0;
        });
      }, onProgress: (progress) {
        setState(() {
          loadingPercentage = progress;
        });
      }, onPageFinished: (url) {
        setState(() {
          loadingPercentage = 100;
        });
      }))
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel("Snackbar", onMessageReceived: (message) {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text(message.message)));
      });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      WebViewWidget(controller: controller),
      if (loadingPercentage < 100)
        LinearProgressIndicator(
          value: loadingPercentage / 100.0,
        )
    ]);
  }
}

Answer 2

you can see a example of complete flutter webview app https://github.com/RamG222/flutter_webview_freemium but it uses older version of webview plugin