Flutter Web - 不支持的操作:卡片小部件中 canvas 的 NaN 错误
Flutter Web - Unsupported operation: NaN error for canvas in Card widget
我正在做一个 flutter web 项目。我们使用库 fl_chart。我们想在 Card
小部件中使用 PieChart
,但它会抛出错误 Unsupported operation: NaN
。它发生在调试和发布模式(从命令行 flutter run lib/main.dart
和 flutter run --release lib/main.dart
启动)但当应用程序通过 VSCode 调试器启动时不会发生。
这是一个小例子 (main.dart
):
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class PieChartTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Card( // <- If you change it to a Container, it is working fine
child: PieChart(
PieChartData(
sections: [
PieChartSectionData(
value: 4.0,
title: 'Section 1',
color: Colors.blue,
),
PieChartSectionData(
value: 6.0,
title: 'Section 2',
color: Colors.red,
),
],
),
),
),
),
);
}
}
Future<void> main() async {
runApp(PieChartTest());
}
这是日志
══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY
╞═════════════════════════════════════════════════════════
The following UnsupportedError was thrown during a scheduler callback:
Unsupported operation: NaN
When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 216:49 throw_
dart-sdk/lib/_internal/js_dev_runtime/private/js_number.dart 80:5 toInt]
dart-sdk/lib/_internal/js_dev_runtime/private/js_number.dart 87:32 ceil]
lib/_engine/engine/bitmap_canvas.dart 176:52
_widthToPhysical
lib/_engine/engine/bitmap_canvas.dart 120:32 new
lib/_engine/engine/html/picture.dart 518:33
[_findOrCreateCanvas]
lib/_engine/engine/html/picture.dart 433:21
paintCallback
lib/_engine/engine/html/surface.dart 49:16
commitScene
lib/_engine/engine/html/scene_builder.dart 552:7 <fn>
lib/_engine/engine/profiler.dart 36:18
timeAction
lib/_engine/engine/html/scene_builder.dart 546:12 build
packages/flutter/src/rendering/layer.dart 770:35
buildScene
packages/flutter/src/rendering/view.dart 231:30
compositeFrame
packages/flutter/src/rendering/binding.dart 458:18 drawFrame
packages/flutter/src/widgets/binding.dart 900:13 drawFrame
packages/flutter/src/rendering/binding.dart 320:5
[_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1119:15
[_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1057:9
handleDrawFrame
packages/flutter/src/scheduler/binding.dart 865:7 <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19
internalCallback
═══════════════════════════════════════════════════════════════════════════════════════
═════════════
Another exception was thrown: Unsupported operation: NaN
我正在使用 Flutter 1.25.0-8。1.pre 测试版
这是怎么回事,为什么?
还有我该如何解决这个问题或者有什么解决办法吗?
编辑:
它也不适用于 Flutter 1.25.0-8.3.pre • channel beta
并遇到同样的问题。
它适用于 Flutter 1.26.0-17.1.pre • channel dev
.
但是我们使用的项目需要内测通道。
它可以使用 --web-renderer canvaskit
选项,但我想继续使用 html
选项。
即使在调试模式下也能正常工作。
不过,我正在使用 stable version
1.22.5.
HTML Web 渲染器可能不支持。
尝试使用 CanvasKit Web 渲染器。
flutter run -d chrome --web-renderer canvaskit .\lib\main.dart
我正在做一个 flutter web 项目。我们使用库 fl_chart。我们想在 Card
小部件中使用 PieChart
,但它会抛出错误 Unsupported operation: NaN
。它发生在调试和发布模式(从命令行 flutter run lib/main.dart
和 flutter run --release lib/main.dart
启动)但当应用程序通过 VSCode 调试器启动时不会发生。
这是一个小例子 (main.dart
):
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class PieChartTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Card( // <- If you change it to a Container, it is working fine
child: PieChart(
PieChartData(
sections: [
PieChartSectionData(
value: 4.0,
title: 'Section 1',
color: Colors.blue,
),
PieChartSectionData(
value: 6.0,
title: 'Section 2',
color: Colors.red,
),
],
),
),
),
),
);
}
}
Future<void> main() async {
runApp(PieChartTest());
}
这是日志
══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY
╞═════════════════════════════════════════════════════════
The following UnsupportedError was thrown during a scheduler callback:
Unsupported operation: NaN
When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 216:49 throw_
dart-sdk/lib/_internal/js_dev_runtime/private/js_number.dart 80:5 toInt]
dart-sdk/lib/_internal/js_dev_runtime/private/js_number.dart 87:32 ceil]
lib/_engine/engine/bitmap_canvas.dart 176:52
_widthToPhysical
lib/_engine/engine/bitmap_canvas.dart 120:32 new
lib/_engine/engine/html/picture.dart 518:33
[_findOrCreateCanvas]
lib/_engine/engine/html/picture.dart 433:21
paintCallback
lib/_engine/engine/html/surface.dart 49:16
commitScene
lib/_engine/engine/html/scene_builder.dart 552:7 <fn>
lib/_engine/engine/profiler.dart 36:18
timeAction
lib/_engine/engine/html/scene_builder.dart 546:12 build
packages/flutter/src/rendering/layer.dart 770:35
buildScene
packages/flutter/src/rendering/view.dart 231:30
compositeFrame
packages/flutter/src/rendering/binding.dart 458:18 drawFrame
packages/flutter/src/widgets/binding.dart 900:13 drawFrame
packages/flutter/src/rendering/binding.dart 320:5
[_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1119:15
[_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1057:9
handleDrawFrame
packages/flutter/src/scheduler/binding.dart 865:7 <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19
internalCallback
═══════════════════════════════════════════════════════════════════════════════════════
═════════════
Another exception was thrown: Unsupported operation: NaN
我正在使用 Flutter 1.25.0-8。1.pre 测试版
这是怎么回事,为什么?
还有我该如何解决这个问题或者有什么解决办法吗?
编辑:
它也不适用于 Flutter 1.25.0-8.3.pre • channel beta
并遇到同样的问题。
它适用于 Flutter 1.26.0-17.1.pre • channel dev
.
但是我们使用的项目需要内测通道。
它可以使用 --web-renderer canvaskit
选项,但我想继续使用 html
选项。
即使在调试模式下也能正常工作。
不过,我正在使用 stable version
1.22.5.
HTML Web 渲染器可能不支持。
尝试使用 CanvasKit Web 渲染器。
flutter run -d chrome --web-renderer canvaskit .\lib\main.dart