Flutter Web中GlobalKey重复使用导致热重载失败问题求助

• 在使用GetX进行状态和路由管理的Flutter Web项目中，网页端执行刷新或热重载时，会抛出GlobalKey was used multiple times inside one widget错误，导致热重载失败；但相同代码在移动端视图下热重载可正常运行。

相关代码 #

class OPSScreen extends StatelessWidget {
    MyOpsController myOpsController=Get.put(MyOpsController());

    @override Widget build(BuildContext context) {
        double screenWidth=MediaQuery.of(context).size.width;
        const double screenSizeThreshold=600;

        return PopScope(onPopInvoked: (bool didPop) {
                // commentsController.initEmptyValues();
            }

            ,
            child: Scaffold(appBar: AppBar(automaticallyImplyLeading: (screenWidth > screenSizeThreshold) ? false : true,
                    backgroundColor: Colors.white,
                    title: const Text('Upload Data',
                        style: TextStyle(color: Colors.black),
                    ),
                ),
                drawer: MyDrawer(indexTobeOpen: 1),
                body: Center(child: Card(color: Colors.white,
                        // margin: EdgeInsets.all(10),
                        child: Container(alignment: Alignment.topRight,
                            decoration: const BoxDecoration(color: Colors.white,
                                borderRadius: BorderRadius.only(topLeft: Radius.circular(0),
                                    topRight: Radius.circular(0),
                                    bottomLeft: Radius.circular(15),
                                    bottomRight: Radius.circular(15),
                                ),
                            ),
                            child: SingleChildScrollView(child: Column(children: [ Container(color: Colors.red, //const Color(0xFF1E9CE1),
                                        padding: const EdgeInsets.fromLTRB(20, 10, 10, 10),
                                        child: const Row(children: [ Icon(Icons.person_outline_rounded,
                                                color: Colors.white,
                                                size: 25,
                                            ),
                                            SizedBox(width: 10,
                                            ),
                                            Text('File Upload',
                                                style: TextStyle(color: Colors.white, fontSize: 17),
                                            ),
                                            // Expanded(child: SizedBox()),
                                            ],
                                        ),
                                    ),
                                    const Divider(height: 0,
                                        color: Colors.grey,
                                    ),
                                    ],
                                ),
                            ),
                        )),
                ),
            ),
        );
    }
}

错误截图 #

原因与解决办法 #

核心原因

Get.put(MyOpsController())直接声明在StatelessWidget的成员变量中，每次Widget重建（热重载、网页刷新）时，都会尝试重新创建并注入同一个Controller实例，导致GetX内部维护的GlobalKey被重复绑定，触发错误。移动端和Web的Widget重建机制差异，导致问题仅在Web端显现。

解决方法

1. 使用Get.find()获取已注入的Controller
   提前在项目入口（如main.dart）或父Widget中完成Controller的注入，当前Widget仅通过Get.find()获取实例：

   class OPSScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       // 仅获取已注入的Controller，避免重复绑定
       MyOpsController myOpsController = Get.find<MyOpsController>();
       // ... 其余代码保持不变
     }
   }
   

2. 通过Get.lazyPut延迟初始化
   在Widget构造函数中用Get.lazyPut延迟创建Controller，结合Get.find()获取，确保仅初始化一次：

   class OPSScreen extends StatelessWidget {
     OPSScreen() {
       // 仅当Controller不存在时才初始化
       Get.lazyPut(() => MyOpsController());
     }
   
     @override
     Widget build(BuildContext context) {
       MyOpsController myOpsController = Get.find<MyOpsController>();
       // ... 其余代码保持不变
     }
   }
   

3. 转为StatefulWidget，在initState中注入
   若需要在当前Widget生命周期内控制初始化时机，可转为StatefulWidget，在initState中完成注入：

   class OPSScreen extends StatefulWidget {
     @override
     State<OPSScreen> createState() => _OPSScreenState();
   }
   
   class _OPSScreenState extends State<OPSScreen> {
     late MyOpsController myOpsController;
   
     @override
     void initState() {
       super.initState();
       // 仅在Widget初始化时注入一次
       myOpsController = Get.put(MyOpsController());
     }
   
     @override
     Widget build(BuildContext context) {
       // ... 其余代码保持不变
     }
   }
   

内容的提问来源于stack exchange，提问作者Ashwini