title: Flutter: How to Fix a 'Multiple Widgets Used the Same GlobalKey' Error
body: <p><strong>Problem:</strong></p>
  <p><a href="https://i.stack.imgur.com/T5TBz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T5TBz.png" alt="enter image description here" /></a></p>
  <p>When I encountered this problem, I was looking to get the middle position of words contained inside a pressed widget.</p>
  <p>I am getting the error, <em><strong>Multiple widgets used the same GlobalKey</strong></em>, while using the minimum viable code below.</p>
  <p>I am at a loss for solving this problem. I am injecting GlobalKeys, which should be unique, and I <strong>would</strong> expect them to be different from one another. The code does work, but it's a bit frustrating that I cannot find the solution.</p>
  <p><strong>What I have tried:</strong></p>
  <p>I have tried, to no avail, several solutions from previously posted issues on StackOverflow, including using different variations of Globalkeys with unique identifiers and making a class with static Globalkeys variables:</p>
  <p><a href="https://stackoverflow.com/questions/62676117/flutter-multiple-widgets-used-the-same-globalkey-error">How to Fix a 'Multiple Widgets used the same Globalkey resource 1</a></p>
  <p><a href="https://stackoverflow.com/questions/63877568/flutter-multiple-widgets-used-the-same-globalkey-or-duplicate-globalkeys">How to Fix a 'Multiple Widgets used the same Globalkey resource 2</a></p>
  <p><a href="https://stackoverflow.com/questions/62325529/flutter-multiple-widgets-used-the-same-globalkey">How to Fix a 'Multiple Widgets used the same Globalkey resource 3</a></p>
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Home(),
      );
    }
  }
  
  class Home extends StatelessWidget {
    final scaffoldKey = GlobalKey&lt;ScaffoldState&gt;();
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        key: scaffoldKey,
        body: SafeArea(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: [LeftSideWidget()],
          ),
        ),
      );
    }
  }
  
  class DisplayCircle extends StatelessWidget {
    final Color color;
  
    DisplayCircle({Key? key, required this.color}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Container(
        width: 120,
        height: 120,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
        ),
        child: CircleAvatar(
          backgroundColor: color,
        ),
      );
    }
  }
  
  class LeftSideWidget extends StatefulWidget {
    const LeftSideWidget({
      Key? key,
    }) : super(key: key);
  
    @override
    _LeftSideWidgetState createState() =&gt; _LeftSideWidgetState();
  }
  
  class _LeftSideWidgetState extends State&lt;LeftSideWidget&gt; {
    double thumbWidth = 70.0;
    var position = 0.0;
  
    changePosition(GlobalKey key) {
      final RenderObject? object = key.currentContext!.findRenderObject();
      final RenderBox renderBox = object as RenderBox;
      final size = object.semanticBounds;
      position = renderBox.localToGlobal(Offset.zero).dy;
      setState(() {
        position = (size.center.dy + position - (thumbWidth / 2));
        print(position.toString());
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Spacer(),
          WordsToPress(
            title: 'TEST LINE 1',
            key: GlobalKey(),
            onPressed: (GlobalKey key) =&gt; changePosition(key),
          ),
          Spacer(),
          WordsToPress(
            title: 'TEST LINE 2',
            key: GlobalKey(),
            onPressed: (GlobalKey key) =&gt; changePosition(key),
          ),
          Spacer(),
          WordsToPress(
            title: 'TEST LINE 3',
            key: GlobalKey(),
            onPressed: (GlobalKey key) =&gt; changePosition(key),
          ),
          Spacer(),
        ],
      );
    }
  }
  
  class WordsToPress extends StatelessWidget {
    final String title;
    final GlobalKey key;
  
    final Function(GlobalKey) onPressed;
  
    const WordsToPress(
        {required this.title, required this.key, required this.onPressed})
        : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTapUp: (_) =&gt; onPressed(key),
        child: Container(
          key: key,
          child: RotatedBox(
            quarterTurns: -1,
            child: Text(
              title,
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p><strong>Question:</strong>
  How do I properly use Globalkeys to ensure that there is only one per widget? Any help would be greatly appreciated.</p>