Flutter：堆栈重叠小部件与第二个小部件

Question

Image link

How can I push the child widget outside the stack's bound.

I want to overlap the search bar at AppBar widget.

Stack's overflow property not working what we use instead of it.

I am using the positioned widget to move on child widget to outside the stack's boundary, but it remains same I am getting issue I need solution for this.

This is my code

---

 PreferredSize _buildAppBar() {
return PreferredSize(
  preferredSize: const Size.fromHeight(100),
  child: AppBar(
    centerTitle: true,
    elevation: 0,
    backgroundColor: Colors.transparent,
    flexibleSpace: Stack(
      clipBehavior: Clip.none,
      fit: StackFit.loose,
      // alignment: AlignmentDirectional.bottomEnd,
      children: [
        Expanded(
          child: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('images/gym.jpg'), fit: BoxFit.cover),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          // top: 90,
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 10),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                // ignore: prefer_const_constructors
                boxShadow: const [
                  BoxShadow(color: Colors.black12, blurRadius: 5)
                ]),
            child: TextFormField(
              // controller: controller,
              decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                    borderSide: BorderSide.none,
                  ),
                  hintText: 'Search Your Product',
                  hintStyle: TextStyle(color: Colors.grey[400]),
                  contentPadding:
                      const EdgeInsets.only(left: 22, right: 12),
                  fillColor: Colors.white,
                  filled: true,
                  suffixIcon: IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.search,
                        size: 30,
                      ))),
              // obscureText: obscureText,
            ),
          ),
        ),
      ],
    ),
    title: const Text(
      'Home',
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
);

}

Answer 1

One of possilbe ways is to use CustomScrollView with SliverAppBar and Stack

Here is the link to one of the solutions