How to make a fullscreen image, from dynamic Flutter list?

Question

New to Flutter here, my problem is that i have a list with dynamic images from model folder with a fixed width and height. All i want is to make the images fullscreen with onTap or onPressed functions. I was trying with Hero without success.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../model/events.dart';
import '../styleguide.dart';

class ImagesCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final event = Provider.of<Events>(context);
    return Column(
      children: <Widget>[
        if (event.galleryImages
            .isNotEmpty) //---------------------------------------GALERY
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 16.0, top: 16, bottom: 26),
                child: Text(
                  "GALLERIA",
                  style: guestTextStyle,
                ),
              ),
            ],
          ),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: <Widget>[
              for (final galleryImagePath in event.galleryImages)
                Container(
                  margin:
                      const EdgeInsets.only(left: 16, right: 16, bottom: 32),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    child: Image.asset(
                      galleryImagePath,
                      width: 200,
                      height: 200,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

I recommend adding GestureDetector as a parent of your Image and in your onTap navigate to another page with a full-screen image.

    GestureDetector(
        child: YourImage,
        onTap: (){
           Navigator.push(context, MaterialPageRoute(builder: (context) => FullImagePageRoute(imageLink)));
        },
      )

then you full image page looks like this

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';


class FullImagePageRoute extends StatelessWidget{
  String imageDownloadUrl;

  FullImagePageRoute(this.imageDownloadUrl);


  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Colors.black,
          appBar: AppBar(

          ),
          body: Container(
              child: PhotoView(
                loadingChild: SpinKitWave(
                  size: 50.0,
                  color: Colors.white30,
                ),

                imageProvider: NetworkImage(imageDownloadUrl),
              )
          ),
        );
  }



}

Plugins used are

1. flutter_spinkit
2. photo_view

Answer 2

If you wanna fill all then you need to use image inside container decoration.

new Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          image: DecorationImage(
            alignment: Alignment.center,
            image: AssetImage("assets/images/jobs/map-details.png"),
            fit: BoxFit.fill,
           // fit: BoxFit.fitWidth also can use fit: BoxFit.fitHeight
          ),
        ),
      ),