Search code examples
androidfluttercross-platformwhatsappwebview-flutter

Whatsapp web Desktop mode in flutter


I want to open Whatsapp Web Desktop mode in my flutter app As shown in picture Required Result

I am used webview_flutter webview_flutter_plus packages but both results same.

my initial url is

https://web.whatsapp.com

The code i am using are as follow

class WhatsAppWebScreen extends StatefulWidget {
  WhatsAppWebScreen({Key? key}) : super(key: key);

  // late Completer<WebViewController> controller;

  @override
  State<WhatsAppWebScreen> createState() => _WhatsAppWebScreenState();
}

class _WhatsAppWebScreenState extends State<WhatsAppWebScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const DrawerWidget(),
      appBar: AppBar(
        title: const Text("WhatsAppWeb"),
        backgroundColor: Color(0xFF128D7E),
      ),
      body: SingleChildScrollView(
        child: Container(
          height: 80.h,
          child: WebViewPlus(
            initialUrl: 'https://web.whatsapp.com',
          
            userAgent:
               "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15",
            javascriptMode: JavascriptMode.unrestricted,
          ),
        ),
      ),
    );
  }
}

Every Time i run this code the url redirects into

www.whatsapp.com

and results like this

enter image description here

I try many different user agents strings but the same result.

I used navigationdelegate parameter to prevent redirection of url. but then it shows blank screen

navigationDelegate: (request) {
       if (request.url.startsWith('https://www.whatsapp.com/')) {
         print('blocking navigation to $request}');
       
         return NavigationDecision.prevent;
       }
      print('allowing navigation to $request');
       return NavigationDecision.navigate;
    },
    onWebViewCreated: (webViewController) {
       _controller.complete(webViewController);
     },

How can i open whatsapp web desktop mode in my flutter app?


Solution

  • WebView(
            initialUrl: 'https://web.whatsapp.com',
          
            userAgent:"Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15",
            javascriptMode: JavascriptMode.unrestricted,
          ),