I have a need to show a dialog with a map in it. The map will be somewhat small on smaller devices and only part of the map needs to be visible. I'd like to have the map load and then zoom and move to a predefined point based on which part of the map I need to show. So far I have this:

class RegionMap extends StatelessWidget {
  const RegionMap({
    Key key,
    @required this.region,
  }) : super(key: key);

  final RegionMapping region;
  
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      elevation: 4,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ClipRect(
            child: Transform.scale(
              scale: region.imageZoomScale,
              alignment: Alignment.topLeft,
              origin: region.imageOffset,
              child: Stack(
                children: [
                  Image.asset('assets/us_map.png'),
                  Image.asset(
                      'assets/regions_indv/${region.regionCode}.png'),
                ],
              ),
            ),
          ),
          Divider(thickness: 2),          
          Text('${region.regionFullName}',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: textSize,
              )),
        ],
      ),
    );
  }
}

which produces this output:

What I am struggling with is the right combination of animations and or transforms to get what I want. No matter what I set the Offset too it shows the same section of the map. Any thoughts on the right combination of things to get what I'm looking for?