How to overlay a view partially using the Stack widget in Flutter

Question

I am using Flutter for my app development. I would like to overlay a poster image view on top of a background image just like in this screenshot below. The code snippet below does this, but it requires me to also position every other widget including the movie title, release date, etc based on poster's position and background image's position, which is not reliable across several devices and orientation. Is there an example or suggestion to solve this problem?

    @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new PlatformAdaptiveAppBar(
        title: new Text(widget.movie.title),
      ),
      body: new Container(
          constraints: new BoxConstraints.expand(),
          child: new Stack(
            children: <Widget>[
              new Container(
                child: new Image(
                    image: new AdvancedNetworkImage(
                        movieGridUtil.getUrlFromPath(widget.movie.backdrop_path,
                            MovieGridImageTypes.BACKDROP),
                        useMemoryCache: false,
                        useDiskCache: true)),
                constraints: new BoxConstraints.expand(height: 250.0),
              ),
              new Positioned(
                  left: 12.0,
                  top: 220.0,
                  child: new Image(
                    width: 100.0,
                    height: 150.0,
                    image: new AdvancedNetworkImage(
                        movieGridUtil.getUrlFromPath(widget.movie.poster_path,
                            MovieGridImageTypes.POSTER),
                        useMemoryCache: false,
                        useDiskCache: true),
                  )),
            ],
          )),
    );
  }

Answer 1

Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 200.0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0,right: 20.0, top:160.0),
            child: Container(
              color: Colors.pink,
              height: 150.0,
              width: 110.0,
            ),
          )
        ],
      ),

By Creating the Stack, You can add multiple Container, whichever is last added will be on the top.

Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 200.0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0,right: 20.0, top:160.0),
            child: Container(
              color: Colors.pink,
              height: 150.0,
              width: 110.0,
            ),
          )
        ],
      ),