flutter container with fade out left effect

Question

I am new at flutter. The user clicks on a button then the container will move left and hide anyone pls help me how to achieve this

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

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

              )

Answer 1

You can check for an AnimatedPositioned widget for the movements as well as Opacity widget for the opacity.

You can preview the solution with this DartPad and play around with it.

Here's the result:

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