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

14ifxucb 于 2023-03-03 发布在 Flutter

关注(0)|答案(3)|浏览(144)

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

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;40.0）壁虎/20100101火狐/40.1）.它不工作..给我解决方案.

flutter

来源：https://stackoverflow.com/questions/52720983/how-to-add-desktop-version-of-website-in-flutter-app

3条答案

按热度按时间

voj3qocg1#

我知道这个迟来的答案，但也许有人会需要它
顺便说一句，我也面临这个问题之前在Flutter
做了这个把戏后，它对我来说是工作
在你的页面加载后，尝试eval这个代码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插件

赞(0）回复(0）举报 2023-03-03

bihw5rsg2#

如果您需要在桌面模式下从Flutter Mobile应用加载网页，可以使用"flutter_inappwebview"插件，该插件允许您向服务器传递一个"userAgent"，用于设置网页浏览器的用户代理字符串。
要在桌面模式下加载页面，可以将用户代理设置为桌面浏览器的用户代理字符串。这可以通过使用"flutter_inappwebview"插件提供的"UserAgent"类来实现。
下面是一个示例代码片段：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

/// desktop User Agent
const desktopUserAgent =
    "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36";

/// Web link
const webWhatsappUrl = "https://web.whatsapp.com/🌎/en/";

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

   @override
  State<DesktopWeb> createState() => _DesktopWebState();
}

class _DesktopWebState extends State<DesktopWeb> {
  InAppWebViewController? _webViewController;

 @override
 Widget build(BuildContext context) {

 final settings = InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
  userAgent: desktopUserAgent,/// pass your user agent
  allowFileAccessFromFileURLs: true,
  allowUniversalAccessFromFileURLs: true,
  useOnDownloadStart: true,
  mediaPlaybackRequiresUserGesture: true,
));

final contextMenu = ContextMenu(
  options: ContextMenuOptions(hideDefaultSystemContextMenuItems: false),
);

return Scaffold(
  body: SafeArea(

    child: InAppWebView(
      initialUrlRequest: URLRequest(url: Uri.parse(webWhatsappUrl)),
      initialOptions: settings,
      contextMenu: contextMenu,
      onWebViewCreated: (InAppWebViewController controller) {
        _webViewController = controller;
      },
   
    ),
   ),
  );
 }
}

赞(0）回复(0）举报 2023-03-03

llew8vvj3#

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

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

赞(0）回复(0）举报 2023-03-03

我来回答

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

3条答案

相关问题

热门标签

最新问答