Flutter Transform.rotate使用，实现红蓝对

示意图：

import 'dart:math';
import 'package:flutter/material.dart';

/*
 * 拼手速页面
 */
class GameHandSpeedPage extends StatefulWidget {
  @override
  _GameHandSpeedPageState createState() => _GameHandSpeedPageState();
}

class _GameHandSpeedPageState extends State<GameHandSpeedPage> {
  String blueNum = "0"; //蓝色方数值
  String redNum = "0"; //红色方数值

  // 动态设置布局
  //isBlue 是否为蓝方，蓝方正面 红方背面
  //
  Widget _getLayoutWdt(bool isBlue, int maxNum) {
    return Expanded(
      child: Stack(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            color: isBlue ? Colors.blue : Colors.red, //北京颜色
          ),
          //数字
          Container(
              padding: EdgeInsets.all(20),
              child: Transform.rotate(
                angle: isBlue ? 0 : pi / 1,
                child: Align(
                  alignment: Alignment.topCenter,
                  child: Text(
                    isBlue ? this.blueNum : this.redNum,
                    style: TextStyle(
                        fontSize: 48,
                        color: Colors.white,
                        fontWeight: FontWeight.w400, //字体粗细
                        decoration: TextDecoration.none),
                  ),
                ),
              )),
          Container(
              child: Transform.rotate(
            angle: isBlue ? 0 : pi / 1,
            child: Align(
              alignment: Alignment.center,
              child: RaisedButton(
                child: Text(
                  "戳",
                  style: TextStyle(fontSize: 60),
                ),
                onPressed: () {
                  setState(() {
                    if (isBlue) {
                      var blue = int.parse(this.blueNum);
                      if (blue == maxNum) {
                        this.blueNum = "你赢了";
                        this.redNum = "你输了";
                      } else {
                        this.blueNum = (blue + 1).toString();
                      }
                    } else {
                      var red = int.parse(this.redNum);
                      if (red == maxNum) {
                        this.redNum = "你赢了";
                        this.blueNum = "你输了";
                      } else {
                        this.redNum = (red + 1).toString();
                      }
                    }
                  });
                },
                color: isBlue ? Colors.red : Colors.blue, //按钮的背景颜色
                textColor: Colors.white, //字体颜色
                elevation: 10.0, //阴影
                splashColor:
                    isBlue ? Colors.red : Colors.blue, //点击后的水波纹的颜色一般不改这里知道就可以了
                shape: CircleBorder(
                    //设置 圆形
                    side: BorderSide(
                        //默认圆形的变宽为黑色
                        color: isBlue ? Colors.red : Colors.blue //所以要在这里设置下边框颜色
                        )),
              ),
            ),
          )),

          //提示
          Container(
              padding: EdgeInsets.all(60),
              child: Transform.rotate(
                angle: isBlue ? 0 : pi / 1,
                child: Align(
                  child: Text(
                    '温馨提示：屏幕很脆，您下手轻点',
                    style: TextStyle(
                        fontSize: 10,
                        color: Colors.white,
                        decoration: TextDecoration.none),
                  ),
                  alignment: Alignment.bottomCenter,
                ),
              ))
        ],
      ),
      flex: 1,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          _getLayoutWdt(false, 10),
          _getLayoutWdt(true, 10),
        ],
      ),
    );
  }
}