how to make Positioned widget in top layer of parents

Question

this is the home page :

        @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/images/background.png"),
                  fit: BoxFit.cover,
                ),
              ),
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: const Stack(
                children: <Widget>[
                  // SizedBox(height: 7),
                  // Header(),
                  // SizedBox(height: 7),
                  BooksList(),
                  Header(),
                ],
              ),
            );
          },
        ),
      );
    }

and this is the BooksList widget

        @override
    Widget build(BuildContext context) {
      return GridView.count(
        crossAxisCount: 5,
        mainAxisSpacing: 40,
        crossAxisSpacing: 40,
        childAspectRatio: 6 / 10,
        padding: const EdgeInsets.only(top: 75, bottom: 20),
        children: books.map((book) {
          return InkWell(
            onTap: () {
              // navigate to book page
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const BookScreen(
                    bookId: "1",
                  ),
                ),
              );
            },
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(book["cover"]),
                  fit: BoxFit.contain,
                ),
              ),
              child: const Stack(
                alignment: Alignment.topRight,
                clipBehavior: Clip.none,
                children: <Widget>[
                  Positioned(
                    right: -15,
                    top: -15,
                    child: Icon(
                      Icons.lock,
                      color: Colors.white,
                      size: 30,
                    ),
                  ),
                ],
              ),
            ),
          );
        }).toList(),
      );
    }

i did try to make to make the top right icon visible in top of parents, by changing all parents to Stack and add "clipBehavior: Clip.none" but it did not work, the weird thing is when the there is one single row it shows the whole icon but when more rows it did not shows,

when more than row :

when just one row

so the question is how to make Positioned widget in top of parents is there anything like zIndex in react native and css, to travel between layers of nested widgets.

Answer 1

This might be solved if we add enough padding to the children. looks like we have added padding to stack container, lets add the padding for the body like below

Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: BooksList(),
    )