Rotating and inverting text


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 {
  _CardTileState createState() => _CardTileState();

class _CardTileState extends State<CardTile> {
  double horizontalDrag = 0;

  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragUpdate: (horizontal) {
        setState(() {
          horizontalDrag +=;
          horizontalDrag %= 360;
      child: Transform(
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.0001)
          ..rotateY(pi / 180 * horizontalDrag),
        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 {
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(top: 18),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
            height: 50,
            color: Colors.grey[700],
            height: 10,
            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('')),


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: Matrix4.identity..rotateY(pi),
  child: CardBack(),

Answered By – JediBurrell

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.