how to add Desktop Version of Website in Flutter app?

Question

i need to show desktop version of website in my app. for me it shows the mobile version of app:

code:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import './landing_page.dart';

class ComicsPage extends StatefulWidget {

@override
_ComicsPageState createState() => _ComicsPageState();

 }
class _ComicsPageState extends State<ComicsPage> {
TextEditingController controller = TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var urlString = "https://avengers.marvelhq.com/comics";

 launchUrl() {
 setState(() {
  urlString = controller.text;
  flutterWebviewPlugin.reloadUrl(urlString);
 });
}

@override
void initState() {
super.initState();

flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
  print(wvs.type);
 });
 }

@override
Widget build(BuildContext context) {
 String newUA= "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 
 Firefox/40.1";
 return WebviewScaffold(
  appBar: AppBar(
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.cancel,size: 45.0),
        onPressed: () => Navigator.of(context).pushAndRemoveUntil(new 
    MaterialPageRoute(builder: (BuildContext context) => new LandingPage()), 
   (Route route) => route == null),
      )
    ],
    title: const Text('Marvel Comics'),
  ),
  url: urlString,
  withZoom: true,
  withJavascript: true,
  withLocalStorage: true,
  scrollBar: true,
  enableAppScheme: true,

  userAgent: newUA,
  clearCookies: false,
  clearCache: false,

   );
 }
}

i need to view like this sample image

especially for this site: click here

i tried to change useragent to desktop version(Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1). it not works.. give me solution.

Solution

i know this late answer but maybe someone will need it

BTW i also face this problem before in flutter

after do this trick it was work for me

just try eval this code JavaScript after your page is Loaded

like this

//to load desktop mode
  String js =
      "document.querySelector('meta[name=\"viewport\"]').setAttribute('content', 'width=1024px, initial-scale=' + (document.documentElement.clientWidth / 1024));";

  @override
  Widget build(BuildContext context) {
    final flutterWebViewPlugin = new FlutterWebviewPlugin();

    flutterWebViewPlugin.onProgressChanged.listen((event) {
      debugPrint("Progress $event");

        //this will make show in desktop mode 
        flutterWebViewPlugin.evalJavascript(js);

    });

    return WebviewScaffold(
      appBar: AppBar(
        title: Text("Desktop Mode"),
      ),
      url: "My Url",
      withJavascript: true,
      useWideViewPort: true,
      displayZoomControls: false,
      scrollBar: true,
      withZoom: true,
    );
  }  

Link Of WebView Plugin here

Comments

[Neeleshwar Kumar]

It just opens zoomed out view, not the desktop version of site

[Ottoman Coder]

It's not working. I tried this method