Rotating and inverting text

Issue

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.

back

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('')),
                )),
          ),
        ],
      ),
    );
  }
}

Solution

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

Answered By – JediBurrell

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.