Route throwing exception "There are multiple heroes that share the same tag within a subtree" while navigating to other screen

Question

Expanded(flex: 1, child: GestureDetector(
               onTap: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => ResultPage()
              ));
            },
            child: Container(
              alignment: Alignment.center,
              color: Color(0XFFEB1555),
              child: Text("CALCULATE", style: TextStyle(color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),),
            ),
          ))

Getting Exception :

════════ Exception caught by scheduler library ═════════════════════════════════════════════════════ The following assertion was thrown during a scheduler callback: There are multiple heroes that share the same tag within a subtree.

Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must have a unique non-null tag. In this case, multiple heroes had the following tag: Here is the subtree for one of the offending heroes: .............................................................

Answer 1

i had same issue, solved removing gesture detector, used inkwell onTap instead.

changed this :

GestureDetector(
      onTap: () {
        Navigator.of(context, rootNavigator: true).push(
          MaterialPageRoute(
            builder: (context) => ChangeNotifierProvider(
              create: (BuildContext context) {
                ProductViewModel();
              },
              child: ProductDetails(
                product: _shownProduct,
              ),
            ),
          ),
        );
      },
      child: InkWell(
            child: Hero(
              tag: _shownProduct.productID,
              child: CachedNetworkImage(
                fadeInDuration: Duration(milliseconds: 1),
                imageUrl: _shownProduct.images[0],
                imageBuilder: (context, imageProvider) => Container(
                  height: MediaQuery.of(context).size.flipped.height / 3.2,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => CircularProgressIndicator(
                  strokeWidth: 0.5,
                ),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
            ),
          ),

to this :

InkWell(
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => ProductDetails(
                    product: _shownProduct,
                  ),
                ),
              );
            },
            child: Hero(
              tag: _shownProduct.productID,
              child: CachedNetworkImage(
                fadeInDuration: Duration(milliseconds: 1),
                imageUrl: _shownProduct.images[0],
                imageBuilder: (context, imageProvider) => Container(
                  height: MediaQuery.of(context).size.flipped.height / 3.2,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => CircularProgressIndicator(
                  strokeWidth: 0.5,
                ),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
            ),
          ),

and it solved my problem.

Answer 2

Adding my solution as my issue was caused by moving few dart files to different directories. That caused exact same problem.

While, I kept checking for the solution given above, none of them could help till I realized that I needed to change dart file path from 'import'. Hope, this may help someone in future.

Answer 3

Each fab has to non-null a unique hero key

floatingActionButton: FloatingActionButton(
          heroTag: 'unique_key',
          ...
        ),

and Hero widgets

Hero(
      tag: 'unique_key',
      ...
    ),

Answer 4

Please be sure that you have not use FAB, because i thught that i have not use FAB on my page , but after longer analyses i understand i have used it in widget-> widget-> widget , then if you want determine unique key then you can use

FloatingActionButton(
                  heroTag: StringOperations().generateRandomString(5),
                    backgroundColor: MyColors.shineBlueColor,
                    onPressed: () {
                   
                    },
                    label: Text(
                      "text",
                    ),
              
                  )

Then:

     String generateRandomString(int len) {
        var r = Random();
        return String.fromCharCodes(List.generate(len, (index) => r.nextInt(33) + 89));
      }
//will give you random string