I have a panel with an image that displays on the edge of the screen. I hope it can transform into a bottom modal sheet dialog when user clicks on it. How can I achieve it?

Below is the code of my simplified side panel.

class _FittingRoomProductSidePanelState extends State<FittingRoomProductSidePanel> {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: FittingRoomProductSidePanel.width,
      height: 200,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(10)),
        boxShadow: [ GlobalUI.lightShadow ],
      ),
      child: Column(children: [
        Stack(alignment: Alignment.center, children: [
          ClipRRect(
            borderRadius: const BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
            child: Hero(tag: pictureUrl, child: Image.network(pictureUrl, width: 100, height: 100, fit: BoxFit.cover)),
          ),
          GestureDetector(
            onTap: () {
              // transform here
            },
            child: Container(
              width: FittingRoomProductSidePanel.width, height: FittingRoomProductSidePanel.width,
              padding: const EdgeInsets.only(left: 2, right: 2, bottom: 2),
              decoration: const BoxDecoration(gradient: LinearGradient(colors: [Colors.black38, Colors.transparent], begin: Alignment.bottomCenter, end: Alignment.topCenter)),
              alignment: Alignment.bottomCenter,
              child: Text("hello", style: const TextStyle(fontSize: 10, color: Colors.white), maxLines: 3)
            ),
          )
    ]);
      ]),
    );
  }

}

Below is a simplified dialog that I want:

class _FittingRoomProductDialogState extends State<FittingRoomProductDialog> {

  @override
  Widget build(BuildContext context) {
    return Container(
        width: Global.screenWidth,
        height: Global.screenHeight / 2,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
          boxShadow: [ GlobalUI.bottomShadow ]
        ),
        child: Padding(
          padding: const EdgeInsets.only(top: 20, left: 10),
          child: Column(children: [
            _buildHeader(),
          ])
        )
      )
    ); 
  }

  Widget _buildHeader(){
    return SizedBox(
      height: 60,
      child: Row(children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Hero(
            tag: _baseProduct!.modelPicture!,
            child: CachedNetworkImage(
              imageUrl: _baseProduct?.modelPicture ?? _product!.modelPicture!,
              width: 60,
              height: 60,
              fit: BoxFit.cover,
              placeholder: (context, url) => WidgetUtils.loadingSign(),
            ),
          ),
        ),
        const SizedBox(width: 10),
        Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Text(_baseProduct?.name ?? _product!.name, maxLines: 2, overflow: TextOverflow.ellipsis, style: TextStyle(color: GlobalUI.blackThemeColor, fontWeight: GlobalUI.fontWeight450, fontSize: 13)),
          const Spacer(),
          WidgetUtils.priceInfoRichText(_baseProduct?.price ?? _product!.price, unitFontSize: 11, priceFontSize: 13),
        ])),
        IconButton(
          onPressed: () {
            RouteUtils.showFromRight(ProductPage(product: _product ?? _baseProduct, productCode: _productCode));
          },
          icon: const Icon(Icons.arrow_forward_ios_rounded, size: 20, color: GlobalUI.blackThemeColor),
        ),
      ])
    );
  }

I tried adding Hero to both images, but it seems that Hero will only work on different routes. In my case, the panel and the dialog are in the same page. So it fails.

It is okay for me to just transform the image and the container. How can I achieve it?

Thanks in advance!