Flutter 如何修复倒置的'；ok'；扁平按钮中的文本？

我是颤振的初学者。正在尝试设计登录页面。当用户单击“确定”按钮时，“确定”按钮将不可见，“批准”命名按钮将通过一些动画显示。问题是“ok”以倒转的形式显示，如图所示。我如何纠正这个问题

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Animation class',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => stateClass();
}

class stateClass extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;
  Animation<double> sizeAnimation;
  int currentState = 0;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this);
    animation = Tween<double>(begin: 0, end: 60).animate(animationController)
      ..addListener(() {
        setState(() {});
      });

    sizeAnimation = Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
        parent: animationController, curve: Curves.fastOutSlowIn))
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('Animation login'),
        ),
        body: Container(
            child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Container(
                  height: 100,
                  //color: Colors.black,
                  child: Center(
                    child: Image.asset('assets/fluttericon.png'),
                  )),
              Container(
                margin: EdgeInsets.all(10),
                padding: EdgeInsets.all(10),
                child: TextFormField(
                  decoration: InputDecoration(
                    labelText: 'enter your email id',
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                padding: EdgeInsets.all(10),
                child: TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: 'enter your password',
                  ),
                ),
              ),
              Container(
                // color: Colors.teal,
                //   height: 0,
                child: Center(
                    child: Transform.scale(
                  scale: sizeAnimation.value - 1,
                  child: FlatButton(
                    onPressed: animationController.forward,
                    color: Colors.redAccent[200],
                    child: Text(
                      'ok',
                      style: TextStyle(fontSize: 17, color: Colors.black),
                    ),
                  ),
                )),
              ),
              Container(
                //color: Colors.teal,
                height: 80,
                child: Center(
                    child: Transform.scale(
                  scale: sizeAnimation.value,
                  child: FlatButton(
                    onPressed: animationController.reverse,
                    color: Colors.redAccent[200],
                    child: Text(
                      'approved',
                      style: TextStyle(fontSize: 17, color: Colors.black),
                    ),
                  ),
                )),
              ),
            ],
          ),
        )
      )
    );
  }
}

当我将sizeAnimation.value-1更改为sizeAnimation时。那么“ok”这个词是竖直的。但ok按钮不是不可见的

---

对于您尝试执行的操作，一个可能的解决方案是使用淡入淡出和旋转过渡，每个文本小部件都有单独的控制器。下面是一个例子：

class ButtonTextFadeRotation extends StatefulWidget {
  @override
  _ButtonTextFadeRotationState createState() => _ButtonTextFadeRotationState();
}

class _ButtonTextFadeRotationState extends State<ButtonTextFadeRotation> with TickerProviderStateMixin {
  AnimationController _okAnimationController;
  AnimationController _approvedAnimationController;

  @override
  void initState() {
    _okAnimationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
      value: 1
    );

    _approvedAnimationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
      value: 0
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRect(
        child: RaisedButton(
          onPressed: () {
            _okAnimationController.reverse();
            _approvedAnimationController.forward();
          },
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              FadeTransition(
                opacity: _okAnimationController,
                child: RotationTransition(
                  turns: _okAnimationController,
                  alignment: Alignment.center,
                  child: Text('Ok'),
                ),
              ),
              FadeTransition(
                opacity: _approvedAnimationController,
                child: RotationTransition(
                  turns: _approvedAnimationController,
                  alignment: Alignment.center,
                  child: Text('Approved'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class按钮extfaderotion扩展StatefulWidget{
@凌驾
_ButtonTextFadeRotationState createState（）=>\u ButtonTextFadeRotationState（）；
}
类_ButtonExtFaderRotationState使用TickerProviderStateMixin扩展状态{
AnimationController _-okAnimationController；
AnimationController\u认可的AnimationController；
@凌驾
void initState（）{
_okAnimationController=AnimationController(
vsync:这个,，
持续时间：持续时间（毫秒：200），
价值：1
);
_approvedAnimationController=AnimationController(
vsync:这个,，
持续时间：持续时间（毫秒：200），
数值：0
);
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回中心(
孩子：ClipRect(
孩子：升起按钮(
已按下：（）{
_okAnimationController.reverse（）；
_approvedAnimationController.forward（）；
},
子：堆栈(
对齐：对齐.center，
儿童：[
衰减转换(
不透明度：_okAnimationController，
子：旋转变换(
转动：_okAnimationController，
对齐：对齐.center，
子项：文本（'Ok'），
),
),
衰减转换(
不透明度：_approvedAnimationController，
子：旋转变换(
转身：_认可的动画控制器，
对齐：对齐.center，
子项：文本（“已批准”），
),
),
],
),
),
),
);
}
}

你的解释令人困惑。请尽量言简意赅，直指你的具体问题。

class ButtonTextFadeRotation extends StatefulWidget {
  @override
  _ButtonTextFadeRotationState createState() => _ButtonTextFadeRotationState();
}

class _ButtonTextFadeRotationState extends State<ButtonTextFadeRotation> with TickerProviderStateMixin {
  AnimationController _okAnimationController;
  AnimationController _approvedAnimationController;

  @override
  void initState() {
    _okAnimationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
      value: 1
    );

    _approvedAnimationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
      value: 0
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRect(
        child: RaisedButton(
          onPressed: () {
            _okAnimationController.reverse();
            _approvedAnimationController.forward();
          },
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              FadeTransition(
                opacity: _okAnimationController,
                child: RotationTransition(
                  turns: _okAnimationController,
                  alignment: Alignment.center,
                  child: Text('Ok'),
                ),
              ),
              FadeTransition(
                opacity: _approvedAnimationController,
                child: RotationTransition(
                  turns: _approvedAnimationController,
                  alignment: Alignment.center,
                  child: Text('Approved'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}