从屏幕右侧将动画翻译到外部

时间:2019-05-13 14:35:06

标签: flutter flutter-animation

flutter中的ui的实现中,我想进行翻译,以在单击IconButton后将容器从屏幕右侧移到外部,不幸的是我的实现不起作用

enter image description here

class _Login extends State<Login> {
  var _alignment = Alignment.center;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          AnimatedContainer(
            duration: Duration(seconds: 2),
            alignment: _alignment,
            child: Container(
                margin: EdgeInsets.only(
                    left: 25, top: MediaQuery.of(context).size.height * 0.25),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(
                      height: 20,
                    ),
                    Row(
                      children: <Widget>[
                        Container(
                          decoration: BoxDecoration(
                              color: Colors.indigo[600].withOpacity(0.6),
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(10.0),
                                  bottomLeft: Radius.circular(10.0))),
                          height: 75,
                          width: MediaQuery.of(context).size.width * 0.73,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  SizedBox(
                                    width: 15,
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          width: 2.5,
                        ),
                        Container(
                          decoration: BoxDecoration(
                              color: Colors.indigo[600].withOpacity(0.6)),
                          height: 75,
                          width: MediaQuery.of(context).size.width -
                              ((MediaQuery.of(context).size.width * 0.73) +
                                  25 +
                                  2.5),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              IconButton(
                                icon: new Icon(Icons.account_circle),
                                onPressed: () {
                                  print('ddddddddd');
                                    setState(() {
                                       _alignment = Alignment.centerRight;
                                    });
                                },
                                iconSize: 40.0,
                                color: Colors.white,
                              ),
                            ],
                          ),
                        ),
                      ],
                    )
                  ],
                )),
          )
        ],
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:0)

问题已解决

我使用this library,可以帮助我制作简单的动画