net::err_unknown_url_scheme phone, whatsapp and telegram link on webview_flutter

Question

I'm new to mobile development and I can't find the answer to this question: I have a website and the website has links to whatsapp, telegram, phone and instagram profile. webview_flutter loads the page but when I click on the links it gives me the error net::err_unknown_url_scheme. The webpage at whatsapp://send/?phone=%2B996500777888......... enter image description here

main.dart

    import 'package:flutter/material.dart';
    import 'page/webview_page.dart';

    void main() {
      runApp(const MyApp());
    }

    class MyApp extends StatelessWidget {
      const MyApp({super.key});
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'НоНси-ОРТ',
          theme: ThemeData.dark(),
          home: const WebViewPage(),
        );
      }
    }

webview_page.dart

    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    
    
    class WebViewPage extends StatefulWidget {
      const WebViewPage({super.key});
    
      @override
      State<WebViewPage> createState() => _WebViewPageState();
    }
    
    
    
    class _WebViewPageState extends State<WebViewPage> {
      late WebViewController _webController;
    
      double progress = 0;
      
      @override
      Widget build(BuildContext context) {
        return WillPopScope(
          onWillPop: () async {
            if (await _webController.canGoBack()) {
              _webController.goBack();
            } 
            // Stay App
            return false;
          },
          child: Scaffold(
            appBar: AppBar(
              toolbarHeight: 0, 
            ),
            body: Column(
              children: [
                LinearProgressIndicator(
                  value: progress,
                  color: Colors.red,
                  backgroundColor: Colors.black,
                ),
                Expanded(
                  child: WebView(
                    javascriptMode: JavascriptMode.unrestricted,
                    initialUrl: 'https://ort.nonsi.kg',
                    onWebViewCreated: (controller) {
                      _webController = controller;
                    },
                    onProgress: (progress) {
                      this.progress = progress / 100;
                      setState(() {});
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

Answer 1

First, add url_launcher library to your project and use navigationDelegate in your webview to handle the link clicks.

WebView(
    javascriptMode: JavascriptMode.unrestricted,
    initialUrl: 'https://ort.nonsi.kg',
    onWebViewCreated: (controller) {
      _webController = controller;
    },
    onProgress: (progress) {
      this.progress = progress / 100;
      setState(() {});
    },
    navigationDelegate: (navigationRequest) async {
        final link = navigationRequest.url;
        final uri = Uri.parse(link);
        if(await canLaunchUrl(uri)) {
            await launchUrl(uri);
        }
        return NavigationDecision.prevent;
    }
  ),