Flutter overlay page, details account page

Question

I'm trying to make an app and I need the help of the community for something: I'm trying to make an overlay (which would be a new page) coming on top of an other page. Look at these screenshots found on dribbble and I'll try to explain better then.

So, imaging you're on the page as shown on the first screenshot. What I want to do is, when you click, for exemple on the "contact page" button, a windows comes up from the bottom of the screen with a linear animation, and show the view, as on the screenshot on the right of the screen. But I don't want it to be a "real new page" because as you can see on the second screenshot, we can see in transparency the first page behind...

And of course, when you click the cross button, the window pop...

Ask me any question if I'm not clear enough.

Any help is welcome ! Thanks a lot, stackoverflow is an extraordinary community !

Answer 1

Here a min example how you can achieve this using AnimatedPositioned widget hoping it will help you get started.

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  final double containerHeight = 200.0;

  bool _showProfile;

  @override
  void initState() {
    _showProfile = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.teal,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.redAccent,
              child: Center(
                child: FlatButton(
                  child: Text("Animate"),
                  onPressed: () {
                    setState(() {
                      _showProfile = true;
                    });
                  },
                ),
              ),
            ),
            AnimatedPositioned(
                bottom: _showProfile ? 0 : -containerHeight,
                right: 0,
                left: 0,
                duration: Duration(milliseconds: 300),
                child: Container(
                  color: Colors.white,
                  height: containerHeight,
                ))
          ],
        ),
      ),
    );
  }
}