scribble
scribble copied to clipboard
timcreatedit
Multiple widgets used the same GlobalKey
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.
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,
),
),
),
),
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
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 @anaghvj I still can't reproduce. Could you share a minimal example, ideally without any 3rd party dependencies?
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,
),
),
),
),
],
),
),
),
);
}
}
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.