Flutter how to animate matrix4 translate when button is tapped - flutter

Question

I have 2 button, to control a scrolling of InteractiveViewer widget, left and right, hopefully I can add up and down later own my own after i have better understanding of matrix4Tween
right now the button is as such
Row(
children: [
ElevatedButton(
onPressed: () {
controller.value = Matrix4.identity()..translate(0.0, 0.0);
},
child: Text('<'),
),
ElevatedButton(
onPressed: () {
controller.value = Matrix4.identity()..translate(-(width), 0.0);
},
child: Text('>'),
),
],
),
and below it is a interactiveViewer widget that contains 4 gridview
Container(
color: Colors.grey,
width: gridboxwidth,
height: gridboxheight,
child: InteractiveViewer(
alignPanAxis: true,
constrained: false,
transformationController: controller,
scaleEnabled: true,
minScale: 0.1,
maxScale: 1,
child: Column(
children: [
Row(
children: [
grid1(size),
grid3(size),
],
),
Row(
children: [
grid2(size),
grid4(size),
],
),
],
),
),
),
and it works just fine, on tap of the button, the grid moves into view, but I don't think it is intuitive enough and some animation might need to be added to show that the grid has changed.
Any help and guidance is greatly appreciated.

Answer 1

this is a sample widget that uses Matrix4Tween, the important lines of code are marked with // NOTE: comments:
class FooInteractiveViewer extends StatefulWidget {
#override
_FooInteractiveViewerState createState() => _FooInteractiveViewerState();
}
class _FooInteractiveViewerState extends State<FooInteractiveViewer> with TickerProviderStateMixin {
AnimationController _ctrl;
Animation<Matrix4> _matrixAnimation = AlwaysStoppedAnimation(Matrix4.identity());
final _transformationController = TransformationController();
#override
void initState() {
super.initState();
_ctrl = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500),
)
// NOTE: add listener to be called each time _ctrl changes
..addListener(_listener);
}
void _listener() {
print(MatrixUtils.transformPoint(_matrixAnimation.value, Offset.zero));
// NOTE: this is the most important part of this code:
_transformationController.value = _matrixAnimation.value;
}
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return InteractiveViewer(
// panEnabled: false,
alignPanAxis: true,
constrained: false,
transformationController: _transformationController,
child: SizedBox(
width: constraints.maxWidth * 2,
height: constraints.maxHeight * 2,
child: Column(
children: [
Expanded(
child: Row(
children: [
button(Colors.red, constraints.biggest, 1, 0, 'green'),
button(Colors.green, constraints.biggest, 0, 1, 'blue'),
],
),
),
Expanded(
child: Row(
children: [
button(Colors.blue, constraints.biggest, 1, 1, 'orange'),
button(Colors.orange, constraints.biggest, 0, 0, 'red'),
],
),
),
],
),
)
);
},
);
}
Widget button(Color color, Size size, int x, int y, String name) {
return Expanded(
child: Material(
color: color,
child: InkWell(
onTap: () async {
// timeDilation = 10;
// NOTE: create new Animation<Matrix4> that will be used inside _listener
_matrixAnimation = Matrix4Tween(
begin: _transformationController.value,
end: Matrix4.translationValues(-size.width * x, -size.height * y, 0)
).chain(CurveTween(curve: Curves.decelerate)).animate(_ctrl);
// NOTE: lets start the show
await _ctrl.forward(from: 0);
print('### animation finished ###');
},
child: Center(child: Text('go to $name', textScaleFactor: 2)),
),
),
);
}
#override
void dispose() {
super.dispose();
_ctrl.dispose();
}
}