Flutter Interactive Viewer child not on top of stack when expanded - flutter

Question

For screen a Column with a row of two Containers, each showing an image, and an undo FlatButton beneath the row, when I use the InteractiveViewer for the second one in the row it works perfectly but for the first when it is expanded it has the Undo button on top of the image.
Would like for when either of the Containers are used with the Interactive Viewer that they be at the top of the view.
Would also like for Interactive Viewer containers to go full screen on a long press and exit full screen when long press is released.
final TransformationController _transformationController =
TransformationController();
Animation<Matrix4> _animationReset;
AnimationController _controllerReset;
void _onAnimateReset() {
_transformationController.value = _animationReset.value;
if (!_controllerReset.isAnimating) {
_animationReset?.removeListener(_onAnimateReset);
_animationReset = null;
_controllerReset.reset();
}
}
void _animateResetInitialize() {
_controllerReset.reset();
_animationReset = Matrix4Tween(
begin: _transformationController.value,
end: Matrix4.identity(),
).animate(_controllerReset);
_animationReset.addListener(_onAnimateReset);
_controllerReset.forward();
}
void _animateResetStop() {
_controllerReset.stop();
_animationReset?.removeListener(_onAnimateReset);
_animationReset = null;
_controllerReset.reset();
}
void _onInteractionStart(ScaleStartDetails details) {
// If the user tries to cause a transformation while the reset animation is
// running, cancel the reset animation.
if (_controllerReset.status == AnimationStatus.forward) {
_animateResetStop();
}
}
void _onInteractionEnd(ScaleEndDetails details) {
_animateResetInitialize();
}
final TransformationController _transformationController2 =
TransformationController();
Animation<Matrix4> _animationReset2;
AnimationController _controllerReset2;
void _onAnimateReset2() {
_transformationController2.value = _animationReset2.value;
if (!_controllerReset2.isAnimating) {
_animationReset2?.removeListener(_onAnimateReset2);
_animationReset2 = null;
_controllerReset2.reset();
}
}
void _animateResetInitialize2() {
_controllerReset2.reset();
_animationReset2 = Matrix4Tween(
begin: _transformationController2.value,
end: Matrix4.identity(),
).animate(_controllerReset2);
_animationReset2.addListener(_onAnimateReset2);
_controllerReset2.forward();
}
void _animateResetStop2() {
_controllerReset2.stop();
_animationReset2?.removeListener(_onAnimateReset2);
_animationReset2 = null;
_controllerReset2.reset();
}
void _onInteractionStart2(ScaleStartDetails details) {
// If the user tries to cause a transformation while the reset animation is
// running, cancel the reset animation.
if (_controllerReset2.status == AnimationStatus.forward) {
_animateResetStop2();
}
}
void _onInteractionEnd2(ScaleEndDetails details) {
_animateResetInitialize2();
}
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: BGColor,
appBar: AppBar(
backgroundColor: PrimaryColor,
title: Text('App\'name',
style: TextStyle(
color: Colors.white
),
),
leading: GestureDetector(
onTap: () {
Navigator.of(context).pop();},
child: Padding(
padding: EdgeInsets.only(top: 19.0, left: 12.0),
child: Text('Quit',
style: TextStyle(
color: Colors.white54,
fontSize: 18.0,
),
),
),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
flex: 1,
child: tapInstruct(),
),
SizedBox(height: 5.0),
Flexible(
flex: 9,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: InteractiveViewer(
boundaryMargin: EdgeInsets.all(double.infinity),
transformationController: _transformationController,
minScale: 1.0,
maxScale: 5,
onInteractionStart: _onInteractionStart,
onInteractionEnd: _onInteractionEnd,
panEnabled: false,
child: Container(
//margin: EdgeInsets.all(10.0),
child: GestureDetector(
onTap: () => _leftCardTapped(),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.file(
favpicz[lcn]
// fit: BoxFit.fitHeight,
),
),
),
// ),
),
),
),
),
Divider(
thickness: 2.0,
),
Expanded(
flex: 1,
child: InteractiveViewer(
boundaryMargin: EdgeInsets.all(double.infinity),
transformationController: _transformationController2,
minScale: 1.0,
maxScale: 5,
onInteractionStart: _onInteractionStart2,
onInteractionEnd: _onInteractionEnd2,
panEnabled: false,
child: Container(
//margin: EdgeInsets.all(10.0),
child: GestureDetector(
onTap: () => _rightCardTapped(),
//onLongPress: //TODO full screen image,
// onLongPressEnd: ,//TODO exit full screen
//child: Card(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.file(
favpicz[rcn],
),
),
),
//),
),
),
),
),
],
),
),
SizedBox(height: 5.0),
Flexible(
flex: 1,
child:
GestureDetector(
child: FlatButton(
onPressed: () => undo(),
child: Text('Undo',
style: TextStyle(
color: BGColor
),),
color: undoButtonColor,
),
),
)
],
),
),
);
}

Answer 1

I was able to get this to look the way I wanted by wrapping the two Containers and the FlatButton in Visibility widgets and creating functions to set the visibility of the other container and flat button to false when the InteractiveViewer animation began and true when it ended.
Using the Visibility widget also worked for the desired full screen effect on long hold.