flutter container with fade out left effect

Issue

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(

              )

Solution

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

Answered By – BLKKKBVSIK

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.