Flutter Web — неподдерживаемая операция: ошибка NaN для холста в виджете «Карта»

Я работаю над веб-проектом флаттера. Мы используем библиотеку fl_chart. Мы хотели бы использовать PieChart в виджете Card, но это выдает ошибку 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.


Что это происходит и почему?

А также как я могу это исправить или есть какие-то обходные пути?


РЕДАКТИРОВАТЬ:

Это также не работает с Flutter 1.25.0-8.3.pre • channel beta и сталкивается с той же проблемой. Он работает на Flutter 1.26.0-17.1.pre • channel dev .

Но проекту, который мы используем, нужен бета-канал.

Он работает с вариантом --web-renderer canvaskit, но я хотел бы продолжать использовать вариант html.


person Valentin Vignal    schedule 30.01.2021    source источник
comment
Я использую Flutter 1.26.0-1.0.pre dev, и он отлично работает.   -  person Josteve    schedule 30.01.2021
comment
Эй, я просто хочу проверить, вы использовали командные строки, как я описал в своем вопросе, или вы использовали встроенный отладчик вашей IDE?   -  person Valentin Vignal    schedule 30.01.2021
comment
Да, я использовал командную строку.   -  person Josteve    schedule 30.01.2021
comment
Я только что попробовал с Flutter 1.25.0-8.3.pre • channel beta и столкнулся с той же проблемой:/ На самом деле я работаю над 1.26.0-17.1.pre • channel dev . Но проекту, который мы используем, нужен бета-канал. Я обновил свой пост соответственно.   -  person Valentin Vignal    schedule 30.01.2021


Ответы (2)


Вероятно, не поддерживается HTML Web Renderer.

Вместо этого попробуйте использовать веб-рендерер CanvasKit.

flutter run -d chrome --web-renderer canvaskit .\lib\main.dart

person Thierry    schedule 30.01.2021
comment
Это действительно сработало! Но я не уверен, что это ничего не сломает, если мы будем использовать его для создания нашего производственного приложения. - person Valentin Vignal; 30.01.2021
comment
В конце концов, это решение, которое мы использовали. Благодарю вас ! - person Valentin Vignal; 01.02.2021
comment
Пожалуйста! - person Thierry; 01.02.2021
comment
Тот же пакет, некоторые проблемы. Кто-нибудь @me, если они найдут исправление, кроме использования canvaskit, пожалуйста. - person August Kimo; 11.03.2021

Это работает хорошо даже в режиме отладки.

введите здесь описание изображения

Хотя я использую stable version 1.22.5.

person dm_tr    schedule 30.01.2021
comment
Эй, я просто хочу проверить, вы использовали командные строки, которые я описал в своем вопросе, или вы использовали встроенный отладчик вашей IDE? - person Valentin Vignal; 30.01.2021
comment
Ага. Я сделал это через команду flutter run lib/main.dart - person dm_tr; 30.01.2021
comment
Я только что попробовал с Flutter 1.25.0-8.3.pre • channel beta и столкнулся с той же проблемой:/ На самом деле я работаю над 1.26.0-17.1.pre • channel dev . Но проекту, который мы используем, нужен бета-канал. Я обновил свой пост соответственно. - person Valentin Vignal; 30.01.2021