how to add a UI Search bar in a stack flutter - flutter

Question

how can I add my search bar in a different stack in my code? without creating a widget. here's my home. dart file. as you can see I have added a search bar in a different widget at the end of the code. please help me to add this same code in a stack. if it is not possible suggest me another way to do this.
home.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
#override
_HomePageState createState() => _HomePageState();}
class _HomePageState extends State <HomePage>{
#override
Widget build (BuildContext context){
return Scaffold(
backgroundColor: Color(0xffEDEFF4),
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),//padding for search bar
child: ListView (
children: [
buildSearchInput(), //searchbar
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Banana",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/banana.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/orange.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Kiwi",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/kiwi.png"),
),
),
],
),
],
),
),
);
}
//search bar
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(14)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey.shade300,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}

Answer 1

Add it by wrapping it inside Positioned() widget, specifying top, left [and right] padding values.
For it to be visible, insert it as the last item in stack, that way it will be the topmost one on Z axis.
By specifying top,left [and right] values close to 0, it will appear on top and above all other widgets in the stack.