如何在 Flutter 应用中添加桌面版网站？

Posted 2023-02-23

【中文标题】如何在 Flutter 应用中添加桌面版网站？

【英文标题】：how to add Desktop Version of Website in Flutter app?

【发布时间】：2019-03-14 05:30:21

【问题描述】：

我需要在我的应用程序中显示网站的桌面版本。对我来说，它显示了应用程序的移动版本：

代码：

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

特别是对于这个网站：click here

我尝试将用户代理更改为桌面版本（Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1）。它不起作用..给我解决方案。

【问题讨论】：

搜索 android/ios 解决方案。如果有一个，那么 Flutter 也可能有一个。如果 Flutter 还没有开箱即用的支持，它可能需要更多的努力。

刚找到***.com/questions/14688030/…

这里有什么更新吗？

【参考方案1】：

我知道这个迟到的答案，但也许有人会需要它

顺便说一句，我之前也遇到过这个问题

做了这个技巧后它对我有用

在您的页面加载后尝试评估此代码 JavaScript

喜欢这个

//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,
    );
    

WebView插件的链接here

【讨论】：

它只是打开缩小视图，而不是桌面版本的站点

【参考方案2】：

将用户代理参数从 null 更改为下面提到的值

WebView(
              userAgent: "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/4.0",
              initialUrl: html,
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController webViewController) 
                _controller.complete(webViewController);
              ,

【讨论】：

它不工作。我试过这个方法