For starters, I have a map with image bubbles on it and I'm trying to pass the value of PathImage to the widget below when those images are tapped. Basically trying to make it so that when the onTap happens it loads the image in the Hero widget posted below. I fail to understand how to properly pass the value into the widget below. What am I missing to make this happen?

import 'package:cached_network_image/cached_network_image.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import "package:latlong2/latlong.dart";
import 'package:location/location.dart';
import 'DetailScreen2.dart';

class CustomMarker extends StatefulWidget {
  double? latitude;
  double? longitude;
  CustomMarker({this.latitude, this.longitude});

  @override
  _MapsPageState createState() => _MapsPageState();
}

class _MapsPageState extends State<CustomMarker> {
  List<Marker> markers = [];
  final Location _location = Location();
  double? userXCoordinate;
  double? userYCoordinate;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getPermission();
    setMarkers();
  }

  void getPermission() async {
    if (widget.latitude == null || widget.longitude == null) {
      bool serviceEnabled = await _location.serviceEnabled();
      if (serviceEnabled == false) {
        await _location.requestPermission();
      } else {
        await getLocation();
      }
    }
  }

  Future<void> getLocation() async {
    //check permission here
    LocationData pos = await _location.getLocation();
    setState(() {
      userXCoordinate = pos.latitude;
      userYCoordinate = pos.longitude;
    });
    //selectedPage = <Widget>[HomePage(stream: stream), MapsPage(latitude: userXCoordinate, longitude: userYCoordinate,),AddPost(camera: widget.camera,),ProfilePage()];
  }

  void setMarkers() {
    Stream<QuerySnapshot> stream =
    FirebaseFirestore.instance.collection("wllmtnnstpphotos").snapshots();
    stream.forEach((element) {
      element.docs.forEach((doc) {
        //add to marker list
        var docData = doc;
        markers.add(
            customMarker(docData["Lat"], docData["Lng"], docData["PathImage"]),
        );
      });
    });
  }

  Marker customMarker(x, y, docData) {
    return Marker(
      width: 30.0,
      height: 30.0,
      point: LatLng(x, y),
      builder: (ctx) => InkWell(
        child: Container(
          color: Colors.transparent,
          child: CircleAvatar(
            backgroundImage: CachedNetworkImageProvider(docData),
            backgroundColor: Colors.transparent,
            maxRadius: 50,
          ),
        ),
        onTap: () {
          MaterialPageRoute route = MaterialPageRoute(
            builder: (context) => DetailScreener2(docData.elementAt(2)["PathImage"]),
          );
          Navigator.push(context, route);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    var x = widget.latitude;
    var y = widget.longitude;
    return Scaffold(
      body: SafeArea(
          child: x != null || y != null
              ? map()
              : userXCoordinate == null || userYCoordinate == null
              ? loadingPage()
              : map()),
    );
  }

  Widget map() {
    return FlutterMap(
      options: new MapOptions(
          center: LatLng(45.0004173, -123.043808),
          minZoom: 1.0,
          swPanBoundary: LatLng(43.6877, -125.5089),
          nePanBoundary: LatLng(47.7378, -120.6644),
          slideOnBoundaries: true,
          screenSize: MediaQuery.of(context).size,
      ),
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        MarkerLayerOptions(markers: markers)
      ],
    );
  }

  Widget loadingPage() {
    return Center(
      child: SpinKitCircle(
        color: Colors.black,
        size: 50.0,
      ),
    );
  }
}

This is the widget that I want to pass the value of PathImage into below.

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pinch_zoom/pinch_zoom.dart';

class DetailScreener2 extends StatefulWidget {
  DetailScreener2([docData]);

  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreener2> {

  @override
  void initState() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  }

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Container(
          color: Colors.black,
          child: Center(
            child: Hero(
              tag: 'imageHero',
              child: PinchZoom(child: CachedNetworkImage(imageUrl: 'PathImage')),
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

In customMarker method the docData variable is the path of the image but when navigating your are trying to access docData.elementAt(2)['imagepath']. Pass it like this MaterialPageRoute route = MaterialPageRoute( builder: (context) => DetailScreener2(imagePath : docData), ); Instead of using DetailScreener2([docData]) in the DetailScreener2 receive it like the following final String imagePath; DetailScreener({required this.imagePath});

To access this variable use CachedNetworkImage(imageUrl: widget.imagePath)