Flutter Web - Unsupported operation: NaN error for canvas in Card widget

Question

I am working on a flutter web project. We use the library fl_chart. We would like to use a PieChart in a Card widget but it throws the error Unsupported operation: NaN. It happens in debug and release mode (launched from the command lines flutter run lib/main.dart and flutter 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 Flutter 1.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 the html one.

Hey, I just want to check, did you use the command lines as I described in my question or did you use the integrated debugger of your IDE ? — Valentin Vignal, Jan 30 '21 at 16:15
I just tried with Flutter `1.25.0-8.3.pre • channel beta` and hit the same issue :/ I actually works on `1.26.0-17.1.pre • channel dev ` . But the project we use needs the beta channel. I have updated my post accordingly. — Valentin Vignal, Jan 30 '21 at 16:41

Thierry · Accepted Answer · 2021-01-30T17:41:35.080

4

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

edited Jan 30 '21 at 17:41

answered Jan 30 '21 at 16:33

Thierry

7,775
2
15
33

It actually worked ! But I'm not sure it won't break anything else if we use it to build our production app – Valentin Vignal Jan 30 '21 at 16:47
In the end, this is the solution we used. Thank you ! – Valentin Vignal Feb 01 '21 at 07:05
Same package, some problem. Somebody @me if they find a fix outside of using canvaskit please. – August Kimo Mar 11 '21 at 19:12

score 0 · Answer 2 · answered Jan 30 '21 at 16:07

0

This is working well even in debug mode.

Though, am using the stable version 1.22.5.

answered Jan 30 '21 at 16:07

dm_tr

4,265
1
6
30

Hey, I just want to check, did you use the command lines I described in my question or did you use the integrated debugger of your IDE ? – Valentin Vignal Jan 30 '21 at 16:15
Yeah. I did it through the command `flutter run lib/main.dart` – dm_tr Jan 30 '21 at 16:19
I just tried with Flutter `1.25.0-8.3.pre • channel beta` and hit the same issue :/ I actually works on `1.26.0-17.1.pre • channel dev ` . But the project we use needs the beta channel. I have updated my post accordingly. – Valentin Vignal Jan 30 '21 at 16:41

Flutter Web - Unsupported operation: NaN error for canvas in Card widget

2 Answers2