Create a slide effect from top to bottom

Issue

I’m looking for a solution where i can hide a widget and only when some button is pressed the visual effect should be the container dropping from top to bottom.

Example: by pressing the action button a container is shown animated from top to bottom. This container is above everything.

Currently my Widget Build structure is the following:

Container
  Stack
    TheBlueContainerHere()
    Flex
      Flexible
        ListView Builder

I’m not sure if this is the right structure to proceed, but i have not yet figure out a better one.

How can i build something like this?

Solution

Solved.

By following this example flutter notify from top of the screen i was able to create what i wanted.

When the action button is pressed:

Navigator.push(
  context,
  PageRouteBuilder(
    opaque: false,
    pageBuilder: (BuildContext context, _, __) {
      return FunkyNotification();
    },
  ),
);

And the respective code of FunkyNotification() is:

class FunkyNotification extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FunkyNotificationState();
}

class FunkyNotificationState extends State<FunkyNotification>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> position;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 750));
    position = Tween<Offset>(begin: Offset(0.0, -4.0), end: Offset.zero)
        .animate(CurvedAnimation(parent: controller, curve: Curves.decelerate));

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
        color: Colors.transparent,
        child: Align(
          alignment: Alignment.topCenter,
          child: Padding(
            padding: EdgeInsets.only(top: 56.0),
            child: SlideTransition(
              position: position,
              child: Container(
                height: 200,
                width: double.infinity,
                margin: EdgeInsets.only(left: 10, right: 10),
                padding: EdgeInsets.all(15),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(5),
                    bottomRight: Radius.circular(5),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answered By – Linesofcode

Answer Checked By – Mary Flores (FlutterFixes Volunteer)