Стек на работу, как ожидалось | эквивалент z-индекса (CSS)

Question

Я пытаюсь добиться этого (изображение Todo), но изображение становится скрытым. Как вывести это на вершину? Я думал, что использование стека автоматически выведет его на верх. Есть ли эквивалент z-индекса? Я также поделился кодом ниже

Todo

В процессе

код

Widget build(BuildContext context) {
    return new Scaffold(
        body: new CustomScrollView(
      slivers: <Widget>[
        new SliverAppBar(
          expandedHeight: 150.0,
          flexibleSpace: new FlexibleSpaceBar(
            background: new Stack(
              alignment: new Alignment(0.0, 2.5),
              children: [
                new Container(
                  margin: const EdgeInsets.symmetric(vertical: 40.0),
                  decoration: new BoxDecoration(
                      image: new DecorationImage(
                          image: new AssetImage("images/Theme-pattern.png"))),
                  child: new Column(children: <Widget>[
                    new Text("Title", style: new TextStyle(fontSize: 32.0)),
                  ]),
                ),
                new Container(
                  decoration: new BoxDecoration(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(120.0)),
                      color: Colors.white),
                  width: 100.0,
                  child: new Image.asset("images/photo.png"),
                )
              ],
            ),
          ),
        ),
      ],
    ));
  }

Answer 1

Вы можете определенно использовать стек. Проверьте это ниже код:

class MyHomePage extends StatelessWidget {

  final double topWidgetHeight = 200.0;
  final double avatarRadius = 50.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new Column(
            children: <Widget>[
              new Container(
                height: topWidgetHeight,
                color: Colors.yellow,
              ),
              new Container(
                color: Colors.red,
              )
            ],
          ),
          new Positioned(
            child: new CircleAvatar(
              radius: avatarRadius,
              backgroundColor: Colors.green,
            ),
            left: (MediaQuery.of(context).size.width/2) - avatarRadius,
            top: topWidgetHeight - avatarRadius,
          )
        ],
      ),
    );
  }
}