具有淡出左侧效果的颤动容器

Question

我是 Flutter 新手。用户点击一个按钮然后容器将向左移动并隐藏任何人请帮助我如何实现这个

              TextButton(
              onPressed: () {
                setState(() {
                 
                  hide = !hide;
                });
              },
              child: Text("Hide"))

              hide ? Container(
                  height: 200,
                  width: 200,
                  color: Colors.black,
              ):Container(

              )

Answer 1

您可以检查 AnimatedPositioned widget for the movements as well as Opacity 不透明度小部件。

您可以 preview the solution with this DartPad 并使用它。

结果如下：

return Scaffold(
      body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        TextButton(
          onPressed: () {
            setState(() {
              hide = !hide;
            });
          },
          child: Text(
            "Hide",
            style: TextStyle(color: Colors.red, fontSize: 30),
          ),
        ),
        Container(
          height: 200,
          width: double.infinity,
          child: Stack(children: [
            AnimatedPositioned(
              duration: Duration(milliseconds: 500),
              right: hide ? 150 : 0,
              child: AnimatedOpacity(
                duration: Duration(milliseconds: 500),
                opacity: hide ? 0 : 1,
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.black,
                ),
              ),
            ),
          ]),
        ),
      ]),
    );