如何仅在移动浏览器上为 Flutter Web 应用启用缩放+滚动？

Question

我构建并发布了一个 Flutter Web 应用程序，并在桌面和移动浏览器上对其进行了测试。由于屏幕尺寸较小，在移动浏览器上访问时应用程序的设计显得较小，因此我尝试像所有其他流行网站一样使用 2 根手指捏合手势来启用缩放。

我尝试使用很多插件，包括：（全部支持Web和移动平台）

但是，问题是，当我作为应用程序在移动设备上运行时，缩放工作正常，但当我在桌面浏览器上运行时，它会出现异常。现在鼠标可以滚动了缩放后我无法再向下滚动页面。

import 'package:flutter/material.dart';
import 'package:pinch_to_zoom_scrollable/pinch_to_zoom_scrollable.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child:kIsWeb?content():PinchToZoomScrollableWidget(child: content())
      ),
    );
  }

  Widget content(){
    return Column(
        children: [
          Container(color:)
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
         Container(color: Colors.green,width: 100,height: 100,),
          const SizedBox(
            height: 16,
          )
        ],
    );
  }

如何在移动浏览器上查看时添加缩放功能而不弄乱其他平台？为什么 Flutter 默认不支持这种正常行为？

Answer 1

2024年稳定解决方案

首先，请确保更新您的 Flutter 和 Dart SDK 版本。在编写此解决方案时，他们是：

颤振3.19.6
达特3.3.4

然后，您将能够使用 Flutter 的新功能，该功能使您能够将 Flutter 应用程序嵌入到 HTML 页面中。这将使您能够将 Flutter 应用程序封装在普通的 HTML 网页中，并允许您添加来自其他 Web 项目的自定义 JS 和 CSS 文件。来源

这样，您将获得手机上正常的捏合缩放效果+滑动刷新操作。 Flutter 示例项目

错误： 我在下面编写了您需要的最少代码，以及一个允许您制作 Flutter 应用程序的 FIX。填满移动设备浏览器的整个屏幕。

索引.html

<!DOCTYPE html>
<html>
<head>
  <base href="/" />

  <meta charset="UTF-8" />
  <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
  <meta name="description" content="A Flutter Web Element embedding demo." />

<!-- This line fixed the problem when trying to make the app fill 
out the whole screen size
on mobile browsers, as done in the CSS file below -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="Flutter Element embedding" />
  <link rel="apple-touch-icon" href="icons/Icon-192.png" />
  <link rel="preload" as="image" href="icons/Icon-maskable-512.png" />


  <title>Element embedding</title>
  <link rel="manifest" href="manifest.json" />

  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>

  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="flutter_app"></div>

<script>
      window.addEventListener("load", function (ev) {
        // Embed flutter into div#flutter_target
        let target = document.querySelector("#flutter_app");
        _flutter.loader.loadEntrypoint({
          onEntrypointLoaded: async function (engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              hostElement: target,
            });
            await appRunner.runApp();
          },
        });
      });
    </script>
</body>
</html>

样式.css

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  background-color: #fff;
  background-image: radial-gradient(
      ellipse at bottom,
      #fafafa 5%,
      transparent 60%
    ),
    linear-gradient(136deg, transparent, #eee 290%),
    linear-gradient(115deg, #fafafa, transparent 40%),
    linear-gradient(180deg, transparent 0, #ddd 70%),
    radial-gradient(ellipse at -70% -180%, transparent 80%, #eee 0),
    radial-gradient(ellipse at bottom, #71c7ee 40%, transparent 80%),
    radial-gradient(ellipse at 5% 340%, transparent 80%, #ddd 0);
  background-repeat: no-repeat;
  color: #555;
}

/** The style for the DIV where flutter will be rendered, and the CSS fx */
#flutter_app {
  border: 0px solid #aaa;
  height: 100vh;
  width: 100vw;
  border-radius: 0px;
  transition: all 150ms ease-in;
  align-self: center;
}

就是这样！

旧黑客（不推荐，因为它在导航时失败）

我能够使用 2 个插件的组合找到解决方案：

这样，我仅在移动浏览器中访问 Web 应用程序时激活缩放功能。

注意：以下代码质量和结构仅用于演示目的，不应在实际应用程序中使用。发展。

import 'package:flutter/material.dart';
import 'package:pinch_to_zoom_scrollable/pinch_to_zoom_scrollable.dart';
import 'package:platform_detector/platform_detector.dart';

class _MyHomePageState extends State<MyHomePage> {
  int myFlag = 0;

  @override
  void initState() {
    if (isAndroidOs() || isIOS()) {
      myFlag = 1;
    } else {
      if (isAndroidApp()) {
        myFlag = 2;
      } else {
        if (isWindowsWeb() || isLinuxWeb() || isMacOsWeb()) {
          myFlag = 4;
        }
      }
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return myFlag == 0
        ? PinchToZoomScrollableWidget(
            child: content(),
            resetDuration: Duration(minutes: 5),
          )
        : content();
  }

  Widget content() {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
          child: Column(
        children: [
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          Container(color: Colors.green,width: 100,height: 100,),
          const SizedBox(
            height: 16,
          )
        ],
      )),
    );
  }

如何仅在移动浏览器上为 Flutter Web 应用启用缩放+滚动？

问题描述投票：0回答：1

1个回答

2024年稳定解决方案

旧黑客（不推荐，因为它在导航时失败）

最新问题

如何仅在移动浏览器上为 Flutter Web 应用启用缩放+滚动？

问题描述 投票：0回答：1

1个回答

2024年稳定解决方案

旧黑客（不推荐，因为它在导航时失败）

最新问题

问题描述投票：0回答：1