The non-abstract class 'HtmlFlex' is missing implementations for these members

[mark8044]

I started to get this error after upgrade to the latest master branch version, I haven't done an update for about a week and a half, so I'm not sure when exactly this appeared:

Error (Xcode): ../../../.pub-cache/hosted/pub.dev/flutter_widget_from_html_core-0.15.1/lib/src/widgets/html_flex.dart:38:7: Error: The non-abstract class 'HtmlFlex' is missing implementations for these members:

Oddly, it doesn't actually go on to tell me the members...

this is on the latest master channel version:

Flutter 3.24.0-1.0.pre.528 • channel master • https://github.com/flutter/flutter.git
Framework • revision 493c453d57 (4 hours ago) • 2024-08-09 12:53:15 +0200
Engine • revision c9ec468c75
Tools • Dart 3.6.0 (build 3.6.0-131.0.dev) • DevTools 2.38.0

[mrvyas417]

Same issue

class _HtmlFlexRenderObject extends RenderBox
^^^^^^^^^^^^^^^^^^^^^
: Context: 'RenderFlex.spacing' is defined here.
flex.dart:647
double get spacing => _spacing;
^^^^^^^
: Context: 'RenderFlex.spacing=' is defined here.
flex.dart:649
set spacing (double value) {
^^^^^^^

: Error: The method 'hashValues' isn't defined for the class 'SlidableRatioNotification'.
notifications_old.dart:88

• 'SlidableRatioNotification' is from 'package:flutter_slidable/src/notifications_old.dart' ('../.pub-cache/hosted/pub.dev/flutter_slidable-3.1.1/lib/src/notifications_old.dart').
  notifications_old.dart:1
  Try correcting the name to the name of an existing method, or defining a method named 'hashValues'.
  int get hashCode => hashValues(tag, ratio);
  ^^^^^^^^^^

[mark8044]

Same issue

class _HtmlFlexRenderObject extends RenderBox ^^^^^^^^^^^^^^^^^^^^^ : Context: 'RenderFlex.spacing' is defined here. flex.dart:647 double get spacing => _spacing; ^^^^^^^ : Context: 'RenderFlex.spacing=' is defined here. flex.dart:649 set spacing (double value) { ^^^^^^^

: Error: The method 'hashValues' isn't defined for the class 'SlidableRatioNotification'. notifications_old.dart:88

• 'SlidableRatioNotification' is from 'package:flutter_slidable/src/notifications_old.dart' ('../.pub-cache/hosted/pub.dev/flutter_slidable-3.1.1/lib/src/notifications_old.dart').
  notifications_old.dart:1
  Try correcting the name to the name of an existing method, or defining a method named 'hashValues'.
  int get hashCode => hashValues(tag, ratio);
  ^^^^^^^^^^

The second part of your error has to do with the slidable plugin, which I also had a problem with. But the fix is currently on their master branch, just not pushed to pub.dev letsar/flutter_slidable#484

[CheeseLad]

Having this issue also when trying to compile a web app

Compiling lib/main.dart for the Web...
Target dart2js failed: ProcessException: Process exited abnormally with exit code 1:
../.pub-cache/hosted/pub.dev/flutter_widget_from_html_core-0.15.1/lib/src/widgets/html_flex.dart:38:7:
Error: The non-abstract class 'HtmlFlex' is missing implementations for these members:

• Flex.spacing
  class HtmlFlex extends MultiChildRenderObjectWidget
  ^^^^^^^^
  flutter/packages/flutter/lib/src/widgets/basic.dart:4715:16:
  Info: 'Flex.spacing' is defined here.
  final double spacing;
  ^^^^^^^
  ../.pub-cache/hosted/pub.dev/flutter_widget_from_html_core-0.15.1/lib/src/widgets/html_flex.dart:175:7:
  Error: The non-abstract class '_HtmlFlexRenderObject' is missing implementations for these members:
• RenderFlex.spacing
• RenderFlex.spacing=
  class _HtmlFlexRenderObject extends RenderBox

[bekirtaskin]

Facing this as well.

[daohoangson]

Yes, there is a conflict between this package and Flutter master. I'm working on a fix.

[mark8044]

Is there a quick and dirty fix we can do in the meantime to get it working again?

EDIT: Ok I think I got it working with these changes, until the official fix comes in:
edit widgets/html_flex.dart

Line 38:

class HtmlFlex extends MultiChildRenderObjectWidget
    implements
        //ignore: avoid_implementing_value_types
        flutter.Flex {
  const HtmlFlex({
    super.key,
    required this.direction,
    this.spacing = 0.0,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    this.clipBehavior = Clip.none,
    super.children,
  }) : assert(
            !identical(crossAxisAlignment, CrossAxisAlignment.baseline) ||
                textBaseline != null,
            'textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline');
  // Cannot use == in the assert above instead of identical because of https://github.com/dart-lang/language/issues/1811.

  @override
  final double spacing;

Line 177:

class _HtmlFlexRenderObject extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, FlexParentData>,
        RenderBoxContainerDefaultsMixin<RenderBox, FlexParentData>,
        DebugOverflowIndicatorMixin
    implements flutter.RenderFlex {
  /// Creates a flex render object.
  ///
  /// By default, the flex layout is horizontal and children are aligned to the
  /// start of the main axis and the center of the cross axis.
  _HtmlFlexRenderObject({
    List<RenderBox>? children,
    spacing = 0.0,
    Axis direction = Axis.horizontal,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline,
    Clip clipBehavior = Clip.none,
  })  : _spacing = spacing,
        _direction = direction,
        _mainAxisAlignment = mainAxisAlignment,
        _mainAxisSize = mainAxisSize,
        _crossAxisAlignment = crossAxisAlignment,
        _textDirection = textDirection,
        _verticalDirection = verticalDirection,
        _textBaseline = textBaseline,
        _clipBehavior = clipBehavior {
    addAll(children);
  }

  @override
  double get spacing => _spacing;
  double _spacing;
  set spacing (double value) {
    if (_spacing == value) {
      return;
    }
    _spacing = value;
    markNeedsLayout();
  }

[mark8044]

EDIT2, Im getting a ton of crashes with the above code. Not sure if its a problem with the flutter framework or my bad code. Use with caution

[daohoangson]

The proper fix will require Flutter 3.24 so I will do a workaround for v0.15 and release it today. The fix will be released as v0.16 since it is a breaking change.

[daohoangson]

v0.15.2 has been released with the workaround. Please try upgrading and see whether it works with Flutter master. Thank you for your patience.

[mark8044]

@daohoangson
It seems to be working with latest master branch

Flutter 3.25.0-1.0.pre.91 • channel master • https://github.com/flutter/flutter.git
Framework • revision a9e94d9045 (11 minutes ago) • 2024-08-22 09:12:54 -0700
Engine • revision 67a7fe18c0
Tools • Dart 3.6.0 (build 3.6.0-167.0.dev) • DevTools 2.39.0-dev.15

I am getting all sorts of weird glitching on Android when I use HTMLWidget. I don't know if its an issue with this repo or the underlying Flutter SDK, I suspect its a flutter issue as I see this similar problem reported: flutter/flutter#153762

EDIT: Everything is A-OK on 3.24.1 stable branch, but occurs on master branch 3.25

Otherwise thanks much for the fix!

[mark8044]

Ignore my previous comments, it looks like this is a bug with impeller and not to do with this repo 👍