Rotating and inverting text

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(),
),