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

Илгиз Таалайбек уулу 0
Viewed 23

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(() {});
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
webview-flutter flutter
1 Answers

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;
    }
  ),
Rohit Suthar0
Related