Flutter Web部署至Line应用后滚动失效问题求助

以下是针对你遇到的Flutter Web部署后在Line应用内无法滚动问题的几种可行解决方法：

• 自定义滚动行为，确保触摸设备被支持
  Flutter默认的滚动行为可能未适配Line的WebView触摸事件处理，你可以通过自定义ScrollBehavior强制启用触摸设备的滚动支持：

  import 'package:flutter/gestures.dart';
  import 'package:flutter/material.dart';
  
  class LineCompatibleScrollBehavior extends MaterialScrollBehavior {
    @override
    Set<PointerDeviceKind> get dragDevices => {
          PointerDeviceKind.touch,
          PointerDeviceKind.mouse,
        };
  }
  
  // 在MaterialApp中应用该行为
  MaterialApp(
    scrollBehavior: LineCompatibleScrollBehavior(),
    // 其他配置...
  )
  

  重新打包部署后测试Line内的滚动效果。

• 调整web/index.html的viewport与触摸事件处理
  Line的WebView可能对viewport设置或触摸事件有特殊限制，修改web/index.html文件：

  1. 确保viewport meta标签包含正确属性：

     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
     

  2. 添加JavaScript代码阻止Line默认的触摸事件拦截：

     <script>
       // 确保触摸滚动事件能传递到Flutter
       document.addEventListener('touchmove', function(e) {
         e.stopPropagation();
       }, { passive: false });
     </script>
     

• 切换至canvaskit渲染器重新打包
  你当前使用的是html渲染器，尝试换成canvaskit渲染器打包，它的渲染逻辑与原生WebView兼容性可能更好：

  flutter build web --web-renderer canvaskit --release && cp -R build/web/* public && firebase deploy
  

  部署后测试Line内的滚动情况。

• 检查部署资源完整性
  确认cp -R build/web/* public命令完整复制了所有文件，比如flutter.js、main.dart.js以及相关静态资源是否都存在于Firebase部署的public目录中，缺失关键文件可能导致滚动功能异常。

内容的提问来源于stack exchange，提问作者Jump_km