A global key was used multiple times inside one widgets child list flutter web

Question

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,
                                    ),
                                    ],
                                ),
                            ),
                        )),
                ),
            ),
        );
    }

}

flutterweb

Unable to hot reload, when you either refresh from the web screen or if you hot reload from the editor gives GlobalKey was used multiple times inside one widget... error. Hot reload works fine with same code in mobile view.

Any help would be highly appreciated. Thanks in advance!

flutter web error image

I am using Getx for state and route management.

Answer 1

It seems like you are mentioning the use of a global key multiple times within the child list of a widget in Flutter for web development. Without seeing the specific code, it's a bit challenging to provide a precise solution, but I can give you some general guidance.

In Flutter, each widget should typically have its own unique key, especially if they are meant to be identified individually by the framework for purposes like state management and widget updates. Reusing the same key for multiple widgets can lead to unexpected behavior.

Here are some suggestions:

1. Ensure Unique Keys:

   • Make sure each widget within the child list of your parent widget has a unique key.

   Widget build(BuildContext context) {
     return Column(
       children: [
         SomeWidget(key: Key('uniqueKey1')),
         SomeWidget(key: Key('uniqueKey2')),
         // Add more widgets with unique keys
       ],
     );
   }
   

2. Use GlobalKey Wisely:

   • If you are using GlobalKey specifically, ensure that you have a valid reason for using a global key instead of local keys.

   GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
   
   Widget build(BuildContext context) {
     return Scaffold(
       key: _scaffoldKey,
       // Rest of the widget code
     );
   }
   

3. Avoid Reusing Keys:

   • If you are reusing widgets in different parts of your app, consider creating them dynamically with unique keys or clone the existing widgets if they need to be reused with different state.

Remember to provide more specific details or code snippets if you need more targeted assistance.