flutter - 如何修复flatbutton中倒置的“ok”文本？

Question

我是颤振的初学者。试图设计登录页面。当用户单击“确定”按钮时，“确定”按钮将变得不可见，并且“已批准”命名按钮使用某些动画变得可见。问题是'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),
                    ),
                  ),
                )),
              ),
            ],
          ),
        )
      )
    );
  }
}

文本容器

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

当我将 sizeAnimation.value-1 更改为 sizeAnimation 时。然后'ok'这个词是直立的形式。但确定按钮不是不可见的。

截图预览

标签： flutterflutter-layout

Answer 1

您尝试做的一个可能的解决方案是为每个 Text 小部件使用带有单独控制器的 Fade 和 Rotate 过渡。这是一个例子：

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