[QUESTION] Getting "Global key used by multiple widgets" but not global keys provided

[MikesDevCorner]

Hi. I am using the 3.0.0beta2 version for the updated svg dependency. For some reason, I keep getting

The key [GlobalKey#01797] was used by multiple widgets. The parents of those widgets were:
- Html(state: _HtmlState#74abc)
- Html(state: _HtmlState#76179)
A GlobalKey can only be specified on one widget at a time in the widget tree.

Especially by tapping on the html widget, these messages pile up. I am not providing any key or an anchor key to the HTML widget. The widgets are layouted inside a column layout. that column layout is inside a liquidswipe.

Maybe someone knows a solution to this situation :(

I use them like this:

Container(
   padding: EdgeInsets.symmetric(
      horizontal: sizing.scaleHorizontal(20.0),
   ),
   child: Html(
      data: trans(labels,'<div class="center sans-thin"><span class="sans-bold">Abcdef<span class="sans-bold">${male ? 'Ritter' : 'Dame'} ♞</span></div>',),
      style: globals.getHtmlStyle(sizing.scaleHorizontal(5)),
   ),
),

Cute animal pic:

[MikesDevCorner]

I narrowed it down to the use of LiquidSwipe with HTML, there seems to be problems when use these two together. Steps to recreate:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Test Title'),
        ),
        body: LiquidSwipe(
          pages: [
            Container(
              color: Colors.purple,
              width: double.infinity,
              height: double.infinity,
              child: const Center(
                child: Text('Test'),
              ),
            ),
            Container(
              color: Colors.amber,
              width: double.infinity,
              height: double.infinity,
              child: Center(
                child: Html(
                  data: '<div class="center">TEST ABC</div>',
                  style: {
                    ".center": Style(
                      textAlign: TextAlign.center,
                    ),
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Look at this example and tap or drag on the rendered html, the following exception occurs:

The following GlobalKey was specified multiple times in the widget tree. This will lead to parts of the widget tree being truncated unexpectedly, because the second time a key is seen, the previous instance is moved to the new location. The key was:
- [GlobalKey#25af9]
This was determined by noticing that after the widget with the above global key was moved out of its previous parent, that previous parent never updated during this frame, meaning that it either did not update at all or updated before the widget was moved, in either case implying that it still thinks that it should have a child with that global key.
The specific parent that did not update after having one or more children forcibly removed due to GlobalKey reparenting is:
- Html(state: _HtmlState#279ad)
A GlobalKey can only be specified on one widget at a time in the widget tree.

Would be very cool if these two widgets work together :) Thanks, M