Flutter Web - Unsupported operation: NaN error for canvas in Card widget
Probably not supported by the HTML Web Renderer.
Try with the CanvasKit Web Renderer instead.
flutter run -d chrome --web-renderer canvaskit .\lib\main.dart
Valentin Vignal
Student in CentralSupélec and in the National University of Singapore
Updated on December 01, 2022Comments
-
Valentin Vignal over 1 year
I am working on a flutter web project. We use the library fl_chart. We would like to use a
PieChart
in aCard
widget but it throws the errorUnsupported operation: NaN
. It happens in debug and release mode (launched from the command linesflutter run lib/main.dart
andflutter run --release lib/main.dart
) but it doesn't happen when the application is launched through the VSCode debugger.Here is a small example (
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()); }
Here are the logs
══╡ 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
I'm using the Flutter 1.25.0-8.1.pre beta
What is it happening and why ?
And also how can I fix this or is there any work around ?
EDIT:
It also doesn't work with Flutter
1.25.0-8.3.pre • channel beta
and hits the same issue. It works on Flutter1.26.0-17.1.pre • channel dev
.But the project we use needs the beta channel.
It works using the option
--web-renderer canvaskit
but I would like to continue to use thehtml
one.