旋转和反转文本

Question

我正在创建一个网上商店，目前我已经基本完成了大部分。目前我正在开发信用卡动画，尽管我在文本方面遇到了一些问题。我在旋转它的时候遇到了问题，它提示它必须旋转 180 度。

我的卡背面显示的号码格式错误。
这是我设置主页的方式：

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

卡背：

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

您可以旋转卡片的整个背面。您可以使用转换将 CardBack 中的根 Container 包装起来，然后翻转它，或者只是转换 CardBack.

Transform(
  alignment: FractionalOffset.center,
  transform: Matrix4.identity..rotateY(pi),
  child: CardBack(),
),

旋转和反转文本

Rotating and inverting text

flutter

flutter-layout

flutter-animation