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

问题

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

回答1:

Create Stack

Then inside Stack add Column and make full layout without the poster. Then as a second Child of Stack, add this combination:

new Stack(
  children: [
    new Column(
      children: _layout()
    new Positioned(
      top:200,
      left:50,
      child: _child // or optionaly wrap the child in FractionalTranslation
    )]
  )
)

回答2:

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

回答3:

It is very easy to do this, all you have to do is wrap your image in Positioned widget and set position according to your needed, do something like this

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          constraints: BoxConstraints.expand(),
          child: Stack(
            children: <Widget>[
              Positioned(
                height: 250,
                top: 0,
                child: Container(
                    height: double.infinity,
                    alignment: Alignment.center, // This is needed
                    child: Image.asset(
                      ironMan,
                      fit: BoxFit.contain,
                      height: 400,

                    ),
              )),
              Positioned(
                  top: 180.0,
                  left: 12.0,
                  child: Container(
                    child: Image.asset(
                      ironMan2,
                      fit: BoxFit.cover,
                      width: 150,
                      height: 220,
                    ),
                  ),
                  ),
            ],
          )),
    );
  }

来源：https://stackoverflow.com/questions/50441745/how-to-overlay-a-view-partially-using-the-stack-widget-in-flutter