Rotating and inverting text - flutter

Question

I'm creating a online shop store, at the moment I have basically finished most of it. Currently I'm developing the credit card animation, althought I had some problems with the text. I had problems when rotating it, it semmed it has to be rotated in 180 degres.
The back of my card is showing the number the wrong format.
This is how I set up the main page:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:loja_virtual_nnananene/screens/checkout/card/card_back.dart';
import 'package:loja_virtual_nnananene/screens/checkout/card/card_front.dart';
class CardTile extends StatefulWidget {
#override
_CardTileState createState() => _CardTileState();
}
class _CardTileState extends State<CardTile> {
double horizontalDrag = 0;
#override
Widget build(BuildContext context) {
return GestureDetector(
onHorizontalDragUpdate: (horizontal) {
setState(() {
horizontalDrag += horizontal.delta.dx;
horizontalDrag %= 360;
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.0001)
..rotateY(pi / 180 * horizontalDrag),
alignment: Alignment.center,
child: Container(
margin: EdgeInsets.fromLTRB(16, 10, 16, 16),
width: 240,
height: 240,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
gradient: LinearGradient(
colors: [Color(0xff323232), Color(0xff000000)],
begin: Alignment.topLeft,
end: Alignment.bottomRight)),
child: horizontalDrag <= 90 || horizontalDrag >= 270
? CardFront()
: CardBack(),
),
),
);
}
}
The card back:
import 'package:flutter/material.dart';
class CardBack extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(top: 18),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: 50,
color: Colors.grey[700],
),
SizedBox(
height: 10,
),
Container(
margin: EdgeInsets.fromLTRB(0, 0, 20, 0),
height: 40,
width: 220,
color: Colors.grey[700],
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text('123'.split('').reversed.join('')),
)),
),
],
),
);
}
}

Answer 1

You could just rotate the entire back of the card. You can wrap the root Container in CardBack with a Transform, and flip it, or just transform CardBack.
Transform(
alignment: FractionalOffset.center,
transform: Matrix4.identity..rotateY(pi),
child: CardBack(),
),