Multiple widgets used the same GlobalKey

[anaghvj]

Getting GlobalKey Error

Multiple widgets used the same GlobalKey.

════════ Exception caught by widgets library ═══════════════════════════════════
Multiple widgets used the same GlobalKey.
════════════════════════════════════════════════════════════════════════════════

`The following assertion was thrown while finalizing the widget tree:
Multiple widgets used the same GlobalKey.
The key [GlobalKey#beb1f] was used by multiple widgets. The parents of those widgets were:

• CustomPaint(renderObject: RenderCustomPaint#830c9 NEEDS-PAINT)
• CustomPaint(renderObject: RenderCustomPaint#e5d2c NEEDS-PAINT)
  A GlobalKey can only be specified on one widget at a time in the widget tree.

When the exception was thrown, this was the stack:
#6 BuildOwner.finalizeTree. (package:flutter/src/widgets/framework.dart:3177:11)
framework.dart:3177
#7 BuildOwner.finalizeTree (package:flutter/src/widgets/framework.dart:3259:8)
framework.dart:3259
#8 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:992:19)
binding.dart:992
#9 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:448:5)
binding.dart:448
#10 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1386:15)
binding.dart:1386
#11 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1311:9)
binding.dart:1311
#12 SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:1034:7)
binding.dart:1034
#16 _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12)
isolate_patch.dart:184
(elided 3 frames from class _Timer and dart:async-patch)`

How to reproduce:

SizedBox(
              width: MediaQuery.of(context).orientation == Orientation.portrait ? MediaQuery.of(context).size.height - 120 : MediaQuery.of(context).size.width - 120,
              height: MediaQuery.of(context).orientation == Orientation.portrait ? MediaQuery.of(context).size.width - 120 : MediaQuery.of(context).size.height - 140,
              child: AspectRatio(
                aspectRatio: 16 / 9,
                child: Card(
                  clipBehavior: Clip.hardEdge,
                  surfaceTintColor: EmintColors.emerald,
                  elevation: 0.2,
                  child: Scribble(
                    notifier: notifier,
                    drawPen: true,
                  ),
                ),
              ),
            ),

[timcreatedit]

Hi, thanks for opening up an issue. Could you tell me which version of scribble you are on? I can't reproduce this on the latest version.

Also, is it possible, that you are using the same ScribbleNotifier for multiple Scribble widgets? That could lead to the issue you're describing

[anaghvj]

Hi,
We are using scribble: ^0.10.0+1 version,

We are not using multiple scribble widgets but screen orientations happen when building widget. Sharing sample code.

class SignatureView extends StatefulHookConsumerWidget {
  const SignatureView({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _SignatureViewState();
}

class _SignatureViewState extends ConsumerState<SignatureView> {
  late ScribbleNotifier notifier;
  @override
  void initState() {
    notifier = ScribbleNotifier();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
   
    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.landscapeRight,
          DeviceOrientation.landscapeLeft,
        ]);
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack, overlays: []);
      });
      return () {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
          DeviceOrientation.landscapeLeft,
          DeviceOrientation.portraitDown,
          DeviceOrientation.landscapeRight,
        ]);
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: SystemUiOverlay.values);
      };
    }, []);

   
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: SafeArea(
          child: Column(
            children: [
              SizedBox(
                width: MediaQuery.of(context).orientation == Orientation.portrait ? MediaQuery.of(context).size.height - 120 : MediaQuery.of(context).size.width - 20,
                height: MediaQuery.of(context).orientation == Orientation.portrait ? MediaQuery.of(context).size.width - 120 : MediaQuery.of(context).size.height - 120,
                child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: ShapeDecoration(
                      shape: RoundedRectangleBorder(
                        side: BorderSide(width: 1, color: EmintColors.neutral.shade30),
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                    child: Scribble(
                      notifier: notifier,
                      drawPen: true,
                    ),
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: _buildActions(context, provider),
              )
            ],
          ),
        ),
      );
     
  }

[kushal2021]

Any solution for this ? @timcreatedit

I'm also getting this same error.

[timcreatedit]

@kushal2021 @anaghvj I still can't reproduce. Could you share a minimal example, ideally without any 3rd party dependencies?

[timcreatedit]

This is the example I'm running now: When switching orientation, everything works fine, no exceptions in the console.

import 'package:flutter/material.dart';
import 'package:scribble/scribble.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scribble',
      theme: ThemeData.from(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.purple)),
      home: const SignatureView(),
    );
  }
}

class SignatureView extends StatefulWidget {
  const SignatureView({super.key});

  @override
  State<StatefulWidget> createState() => _SignatureViewState();
}

class _SignatureViewState extends State<SignatureView> {
  late ScribbleNotifier notifier;
  @override
  void initState() {
    notifier = ScribbleNotifier();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: SafeArea(
          child: Column(
            children: [
              Text(MediaQuery.of(context).orientation.toString()),
              SizedBox(
                width:
                    MediaQuery.of(context).orientation == Orientation.portrait
                        ? MediaQuery.of(context).size.height - 120
                        : MediaQuery.of(context).size.width - 20,
                height:
                    MediaQuery.of(context).orientation == Orientation.portrait
                        ? MediaQuery.of(context).size.width - 120
                        : MediaQuery.of(context).size.height - 120,
                child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: ShapeDecoration(
                      shape: RoundedRectangleBorder(
                        side: BorderSide(width: 1, color: Colors.red),
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                    child: Scribble(
                      notifier: notifier,
                      drawPen: true,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[kushal2021]

I am not facing this error with minimal code, I am only facing this error with my project's code.

I'm implementing same functionality like instagram story create where user can select multiple images and can draw on particular images.

If you want then we can connect and trace the issue.