How to load a web page from user input string

Question

I'm new to learning flutter and am working on webview. I have created an application that takes in a user input string from a textfield and loads it in a webview widget when a button is pressed. But the webview widget doesn't update when the button is clicked. Here's the code:

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

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

  @override
  State<WebviewScreen> createState() => _WebviewScreenState();
}

class _WebviewScreenState extends State<WebviewScreen> {
  TextEditingController urlController = TextEditingController();
  WebViewController webController = WebViewController();
  String url = 'https://google.com';

  Future<void> buttonPressed() async {
    setState(() {
      url = urlController.text;
    });
    await webController.loadHtmlString(url);
  }

  @override
  void initState() {
    urlController.text = 'https://';
    webController.loadRequest(Uri.parse(url));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Webview App'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.baseline,
              textBaseline: TextBaseline.ideographic,
              children: [
                Expanded(
                  child: Container(
                    margin: const EdgeInsets.symmetric(horizontal: 20),
                    child: TextField(
                      controller: urlController,
                      keyboardType: TextInputType.url,
                      decoration: const InputDecoration(
                        labelText: 'Enter URL',
                      ),
                    ),
                  ),
                ),
                TextButton(
                  onPressed: buttonPressed,
                  child: const Text(
                    'Go',
                    style: TextStyle(fontSize: 25),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 70),
            SizedBox(
              height: 500,
              width: 350,
              child: WebViewWidget(
                controller: webController,
              ),
            )
          ],
        ),
      ),
    );
  }
}

I am running this on the iOS simulator.

webview_flutter version: 4.2.1

Answer 1

You are load html string on button click that's why not load webview its loading normal HTML string.You need to used loadRequest() instead of loadHtmlString().

Future<void> buttonPressed() async {
    setState(() {
      url = urlController.text;
    });
    // await webController.loadHtmlString(url);    // remove this line
    await webController.loadRequest(Uri.parse(url)); // add this line
  }