Stack on working as expected | z-index (CSS) equivalent - flutter

Question

I am trying to achieve this(Todo image) but the image is getting hidden. How to bring it on top? I thought using Stack will automatically bring it on top. Is there any z-index equivalent? I have also shared the code below
Todo
In Progress
Code
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

You can definitely use Stack. Check this below code:
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,
)
],
),
);
}
}

Answer 2

Just add clipBehavior: Clip.none to Stack widget.
Widget build(BuildContext context) {
return new Scaffold(
body: new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
expandedHeight: 150.0,
flexibleSpace: new FlexibleSpaceBar(
background: new Stack(
clipBehavior: Clip.none ,
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 3

Try this package https://pub.dev/packages/indexed
example image
This package allows you to order items inside stack using index like z-index in CSS.
easily you can change the order of items by change the index property
this is example how it works
Indexer(
children: [
Indexed(
index: 100,
child: Positioned(
//...
)
),
Indexed(
index: 1000,
child: Positioned(
//...
)
),
Indexed(
index: 3,
child: Positioned(
//...
)
),
],
);
if you are using bloc of some complex widget you can extands or implement the IndexedInterface class and override index getter:
class IndexedDemo extends IndexedInterface {
int index = 5;
}
or implements
class IndexedDemo extends AnimatedWidget implements IndexedInterface {
int index = 1000;
//...
//...
}
then use it just like Indexed class widget:
Indexer(
children: [
IndexedDemo(
index: 100,
child: Positioned(
//...
)
),
IndexedFoo(
index: 1000,
child: Positioned(
//...
)
),
],
);
Online demo
Video demo