fix net::err_unknown_url_scheme whatsapp link on flutter webview

Question

Please I want to know how to launch WhatsApp in the Flutter webview app or launch WhatsApp from the browser in Flutter, have used many codes with no errors but they do not work.Am using mac m1 and vscode

import 'package:coinpaga/Connectivity_Provider.dart';
import 'package:coinpaga/services/local_notification_service.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'homepage.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:colorful_safe_area/colorful_safe_area.dart';

///  Receive message when app is in background solution for on 
message
Future<void> backgroundHandler(RemoteMessage message)async{
  print(message.data.toString());
  print(message.notification!.title);
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  LocalNotificationServices.initialize();
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(backgroundHandler);
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
  Widget build(BuildContext context) {
return MultiProvider(
  providers: [
    ChangeNotifierProvider(
      create: (context) => ConnectivityProvider(),
      child: HomePage(),
    )
  ],
  child:MaterialApp(
  title: 'coinpaga',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  debugShowCheckedModeBanner: false,
  home: ColorfulSafeArea(
    color: HexColor("#2e2a42"),
    top: true,
    bottom: false,
    left: false,
    right: false,
    child: HomePage(),
  )
),
);
}
}

Home.dart

   import 'package:coinpaga/Connectivity_Provider.dart';
   import 'package:coinpaga/no_internet.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
   import 'package:provider/provider.dart';

  class HomePage extends StatefulWidget {
  // ignore: unused_field
  final _flutterwebview = FlutterWebviewPlugin();
  HomePage({ Key? key }) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 @override
  void initState() {
    super.initState();
    Provider.of<ConnectivityProvider>(context, listen: 
false).startMonitoring();
  }
  @override
  Widget build(BuildContext context) {
    return pageUI();
  }
 @override
  void dispose() {
   _flutterwebview.dispose();
 super.dispose();
 }
}
  Widget pageUI() {
 return Consumer<ConnectivityProvider>(
builder: (context, model, child) {
  return model.isOnline 
? WebviewScaffold(
url: 'https://coinpaga.com',

withLocalStorage: true,
withJavascript: true,
scrollBar: false,
initialChild: Center(child: Text('Loading...')),
  ) : NoInternet();
 },
   );
}

  // ignore: camel_case_types
 class _flutterwebview {
  static void dispose() {}
   }

Please help me go through it.

Answer 1

String text = "Hello World !! Hey There";
String url = "https://wa.me/?text=${Uri.encodeFull(text)}";
if (await canLaunchUrl(Uri.parse(url))) {
await launchUrl(Uri.parse(url),
mode: LaunchMode.externalApplication);
}

Answer 2

You can use url_launcher to launch URLs.

You can give https://api.whatsapp.com/send/?phone=(phone_number) URL to launch.

For the launching the WhatsApp Website use launch('https://api.whatsapp.com/send/?phone=(phone_number)')

Make sure you give your country code without (+).

Answer 3

First, add url_launcher , then I use this code to launch whatsapp on flutter webview and works.

WebView(
                initialUrl: getUrl(_url),
                javascriptMode: JavascriptMode.unrestricted,
                navigationDelegate: (NavigationRequest request) async {
                  if (request.url
                      .startsWith('https://api.whatsapp.com/send?phone')) {
                    print('blocking navigation to $request}');
                    List<String> urlSplitted = request.url.split("&text=");
              
                    String phone = "0123456789";
                    String message =
                        urlSplitted.last.toString().replaceAll("%20", " ");
                   
                    await _launchURL(
                        "https://wa.me/$phone/?text=${Uri.parse(message)}");
                    return NavigationDecision.prevent;
                  }

                  print('allowing navigation to $request');
                  return NavigationDecision.navigate;
                },
          
              )

_launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }