Adjust Z-Index in flutter

Question

I try to place an element above another element in flutter. With transform: Matrix4.translationValues it worked to set a negative value, but the element above has a bigger z-index. How could I adjust that? To understand what I need:

This is what I have

This is what I need

My code

class _AlbumDetailState extends State<AlbumDetail> {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final routeArgs =
        ModalRoute.of(context).settings.arguments as Map<String, int>;
    final albumID = routeArgs['id'];
    final index = routeArgs['index'];
    final picturesData = Provider.of<Pictures>(context, listen: true);

    Future<void> _addPictureToGallery() async {
      final picker = ImagePicker();
      final imageFile =
          await picker.getImage(source: ImageSource.gallery, maxWidth: 600);

      final appDir = await syspath.getApplicationDocumentsDirectory();

      final fileName = path.basename(imageFile.path);

      final savedImage =
          await File(imageFile.path).copy('${appDir.path}/$fileName');

      print(savedImage);

      picturesData.add(Picture(
          album: albumID, path: savedImage.path, timestamp: Timestamp.now()));
    }

    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text("Album"),
            flexibleSpace: FlexibleSpaceBar(
                background: Container(
              color: Colors.transparent,
              child: Hero(
                tag: "open_gallery" + index.toString(),
                child: Image(
                  image: NetworkImage('https://placeimg.com/640/480/any'),
                  fit: BoxFit.cover,
                ),
              ),
            )),
            expandedHeight: 350,
            backgroundColor: Colors.green,
            pinned: true,
            stretch: false,
          ),
          SliverToBoxAdapter(
            child: FutureBuilder(
                future: picturesData.getPicturesFromAlbum(albumID),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.hasData && snapshot.data.length == 0) {
                    return Center(
                      child: Text("Noch keine Bilder vorhanden"),
                    );
                  }
                  if (!snapshot.hasData ||
                      snapshot.connectionState == ConnectionState.waiting) {
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  } else {
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          alignment: Alignment.center,
                          transform: Matrix4.translationValues(0.0, -75.0, 0.0),
                          width: MediaQuery.of(context).size.width - 50,
                          height: 150,
                          color: Colors.black87,
                          margin: EdgeInsets.only(top: 50),
                          child: Text(
                            "Headline",
                            style: Theme.of(context)
                                .textTheme
                                .headline2
                                .copyWith(color: theme.colorScheme.onPrimary),
                          ),
                        ),
                        StaggeredGridView.countBuilder(
                          physics: NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          crossAxisCount: 6,
                          itemCount: snapshot.data.length,
                          itemBuilder: (BuildContext context, int index) =>
                              Container(
                                  child: Image.file(
                            File(snapshot.data[index].path),
                            fit: BoxFit.cover,
                          )),
                          staggeredTileBuilder: (int index) =>
                              new StaggeredTile.count(2, index.isEven ? 2 : 1),
                          mainAxisSpacing: 5.0,
                          crossAxisSpacing: 5.0,
                        ),
                      ],
                    );
                  }
                }),
          )
        ],
      ),
    );
  }
}

The problem: The z-index is not correct on my element. My header is above. How could I adjust the z-index? I know this from CSS. Is there a way to to this with flutter?

Answer 1

try this package https://pub.dev/packages/indexed

https://raw.githubusercontent.com/physia/kflutter/main/indexed/doc/assets/demo.gif

This package allows you to order items inside stack using index like z-index in css 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

Answer 2

One way of achieving overlapping widgets is by using Stack widget. You can check the docs for more details.