flutter - 导航到其他屏幕时路由抛出异常 "There are multiple heroes that share the same tag within a subtree"

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),),
            ),
          ))

获取异常:

════════ 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

我有同样的问题，解决了删除手势检测器的问题，改用 inkwell onTap。

改变了这个:

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),
              ),
            ),
          ),

为此:

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),
              ),
            ),
          ),

它解决了我的问题。