8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. flutter
  3. TypeError：无法读取未定义的属性//Flutter Web

TypeError：无法读取未定义的属性//Flutter Web

Prageeth Liyanage 2月前
40 0

我知道有很多类似的问题，但大多数都已经过时了。我最近在运行时在我的 Web 项目中遇到了常见的 TypeError: Cannot read properties of undefined (reading ...)...

我知道有很多类似的问题，但大多数问题都已经过时了。我最近 TypeError: Cannot read properties of undefined (reading ... 在 Chrome 上运行时，在我的 Web 项目中遇到了这个常见问题。

第一次启动后就会出现错误。当我在 Chrome 中刷新页面时，它就消失了。每次启动应用程序时，“阅读”之后的部分也不同，目前是 ...undefined (reading 'MaterialApp') .

完整错误： 

 EXCEPTION CAUGHT BY WIDGETS LIBRARY 
The following JSNoSuchMethodError was thrown building LayoutBuilder:
TypeError: Cannot read properties of undefined (reading 'MaterialApp')
The relevant error-causing widget was:
  LayoutBuilder
LayoutBuilder:file:///Users/janhecker/Development/vamos_events_dashboard/lib/vamos_events_dashboard.dart:142:16
vamos_events_dashboard.dart:142
When the exception was thrown, this was the stack:
packages/vamos_events_dashboard/vamos_events_dashboard.dart 146:34       <fn>
packages/flutter/src/widgets/layout_builder.dart 119:70                  layoutCallback
packages/flutter/src/widgets/framework.dart 2682:19                      buildScope
packages/flutter/src/widgets/layout_builder.dart 153:5                   [_layout]
packages/flutter/src/rendering/object.dart 2300:59                       <fn>
packages/flutter/src/rendering/object.dart 1056:15                       [_enableMutationsToDirtySubtrees]
packages/flutter/src/rendering/object.dart 2300:7                        invokeLayoutCallback
packages/flutter/src/widgets/layout_builder.dart 228:7                   rebuildIfNecessary
packages/flutter/src/widgets/layout_builder.dart 313:5                   performLayout
packages/flutter/src/rendering/object.dart 2189:7                        layout
packages/flutter/src/rendering/box.dart 2430:11                          layout
packages/flutter/src/rendering/view.dart 175:7                           performLayout
packages/flutter/src/rendering/object.dart 2027:7                        [_layoutWithoutResize]
packages/flutter/src/rendering/object.dart 1020:17                       flushLayout
packages/flutter/src/rendering/binding.dart 516:19                       drawFrame
packages/flutter/src/widgets/binding.dart 865:13                         drawFrame
packages/flutter/src/rendering/binding.dart 381:5                        [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1289:15                      [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1218:9                       handleDrawFrame
packages/flutter/src/scheduler/binding.dart 942:7                        <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19  internalCallback

我的 pubspec.yaml 文件： 

name: vamos_events_dashboard
description: Create, manage, publish and share your events in the vamos! Events Dashboard.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=2.18.6 <3.0.0'

dependencies:
  cloud_firestore: ^4.3.1
  collection: ^1.17.0
  deep_pick: ^0.10.0
  file_picker: ^5.2.5
  firebase_auth: ^4.2.5
  firebase_core: ^2.4.1
  firebase_storage: ^11.0.10
  flutter:
    sdk: flutter
  flutter_gen: ^5.2.0
  flutter_svg: ^2.0.0+1
  freezed_annotation: ^2.2.0
  geoflutterfire2: ^2.3.14
  gleap_sdk: ^9.0.1
  go_router: ^6.0.1
  json_annotation: ^4.8.0
  provider: ^6.0.5
  shared_preferences: ^2.0.17
  universal_html: ^2.0.0
  url_strategy: ^0.2.0

dev_dependencies:
  build_runner: ^2.3.3
  flutter_gen_runner: ^5.2.0
  flutter_test:
    sdk: flutter
  freezed: ^2.3.2
  json_serializable: ^6.6.1
  lint: ^2.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/icons/
  fonts:
    - family: Agrandir
      fonts:
        - asset: assets/fonts/Agrandir-GrandHeavy.ttf
    - family: DMSans
      fonts:
        - asset: assets/fonts/DMSans-Regular.ttf

flutter_gen:
   output: lib/theme/gen/
   line_length: 120
   integrations:
      flutter_svg: true
      universal_html: true

我的index.html文件： 

<!DOCTYPE html>
<html>

<head>
  <!-- Loading animation -->
  <style>
    body {
      background-color: #F1F1F1;
    }

    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .loader {
      border: 6px solid #F1F1F1;
      border-radius: 50%;
      border: 5px solid;
      border-top: 6px solid #916EFF;
      border-right: 6px solid #F1F1F1;
      border-bottom: 6px solid #916EFF;
      border-left: 6px solid #F1F1F1;
      width: 42px;
      height: 42px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>

  <!-- Gleap -->
  <script>
    !function (Gleap, t, i) { if (!(Gleap = window.Gleap = window.Gleap || []).invoked) { for (window.GleapActions = [], Gleap.invoked = !0, Gleap.methods = ["identify", "setEnvironment", "clearIdentity", "attachCustomData", "setCustomData", "removeCustomData", "clearCustomData", "registerCustomAction", "trackEvent", "log", "preFillForm", "showSurvey", "sendSilentCrashReport", "startFeedbackFlow", "setAppBuildNumber", "setAppVersionCode", "setApiUrl", "setFrameUrl", "isOpened", "open", "close", "on", "setLanguage", "setOfflineMode", "initialize"], Gleap.f = function (e) { return function () { var t = Array.prototype.slice.call(arguments); window.GleapActions.push({ e: e, a: t }) } }, t = 0; t < Gleap.methods.length; t++)Gleap[i = Gleap.methods[t]] = Gleap.f(i); Gleap.load = function () { var t = document.getElementsByTagName("head")[0], i = document.createElement("script"); i.type = "text/javascript", i.async = !0, i.src = "https://sdk.gleap.io/latest/index.js", t.appendChild(i) }, Gleap.load() } }();
  </script>

  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- 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="vamos_events_dashboard">
  <!-- <link rel="apple-touch-icon" href="icons/Icon-192.png"> -->

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon-64.png" />

  <title>vamos! Events Dashboard</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>

</head>

<body>
  <!-- Loading animation -->
  <div class="loading">
    <div class="loader"></div>
  </div>
  <script src="main.dart.js" type="application/javascript"></script>

  <!-- Flutter -->
  <script>
    window.addEventListener('load', function (ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function (engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function (appRunner) {
        return appRunner.runApp();
      });
    });
  </script>

</body>

</html>
帖子版权声明 1、本帖标题：TypeError：无法读取未定义的属性//Flutter Web
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Prageeth Liyanage在本站《flutter》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    自从我更新到 Flutter 3.24 后，我遇到了完全相同的问题。在 Chrome 上调试时，每次在“阅读”后都会出现不同的类名。

  • 引用 3楼

    暂时使用自动渲染选项，将其添加到 launch.json 文件中 \'args\': [\'--web-renderer\', \'auto\']，

  • enrm 2月前 0 只看Ta
    引用 4楼

    此问题似乎在使用 Canvaskit 渲染器时出现。如果切换到 HTML，它就会消失...有关如何执行此操作的更多信息：

  • 引用 5楼

    对于 VS Code 编辑（launch.json）： 

    {
  "version": "0.2.0",
  "configurations": [
    {
      "args": [
        "--web-renderer",
        "auto"
      ]
    }
  ]
}

    对于 Android Studio：

    1. 打开运行 > 编辑配置
    2. 选择你的 Flutter 配置并添加其他参数： 
    --web-renderer auto
  • 引用 6楼

    对我有用！这是新设置吗？我升级到 Flutter >=3.4.1 <4.0.0 后才开始看到此错误

  • 引用 7楼

    这会将渲染器设置为浏览器中的 HTML 和移动设备上的 Canvaskit。这意味着问题仍然存在，你只是切换了渲染器：docs.flutter.dev/platform-integration/web/… 并不理想，因为就我而言，我需要 Canvaskit 提供的附加功能……

  • 引用 8楼

    这似乎是 Flutter 版本的一个错误 3.24.0 在这里 和 这里 找到这个问题 .

    看来他们应该在下一个版本中修复它，正如 这里 .

    因此，该版本 3.24.1 （或更高版本）可能已解决该问题。但是，如果您需要稳定的开发环境，我建议您降级到之前的 Flutter 稳定版本。

    否则，您可以将渲染器切换为 HTML（ 或桌面上为 AUTO ）或在首次启动后继续刷新网站/应用程序以使错误暂时消失......

返回
作者最近主题：