I have an image which I receive from the server. This widget is called _stationImage. When I click on an image, I need to enlarge it and darken the background add a close button (I attached a screenshot below). As I understand it, this can be done using Hero animations, but I did not succeed. Tell me how can I implement this?

  Widget _stationImage(PublicChargingStationModel station) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: SizedBox(
        height: 125,
        width: 90,
        child: station.picture != null && station.picture!.isNotEmpty
            ? CachedNetworkImage(
                imageUrl: station.picture!,
                imageBuilder: (context, imageProvider) => Container(
                  width: 78,
                  height: 116,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => Center(
                  child: Container(
                    width: 78,
                    height: 116,
                    alignment: Alignment.center,
                    child: const CircularProgressIndicator(
                      color: constants.Colors.purpleMain,
                    ),
                  ),
                ),
                errorWidget: (context, url, error) => const Icon(
                  Icons.error,
                  color: constants.Colors.purpleMain,
                ),
              )
            : Image.asset(
                constants.Assets.publicStation,
                fit: BoxFit.cover,
              ),
      ),
    );
  }

CodePudding user response：

using showGeneralDialog its work for me...

showGeneralDialog(
      context: context,
      pageBuilder: (context, animation, secondaryAnimation) {
        return SafeArea(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            padding: EdgeInsets.all(20),
            color: Colors.black,
            child: Center(
              child:Column(
                 mainAxisSize: MainAxisSize.min,
              children:<Widget> [

// add your image & close icon here..

              ],
            ),
            ),
          ),
        );
      },
    );
  }