I have this design where the images i provide autoscroll everytime,it's working fine,but when i try to overlap with the textfield so the textfield should be in between of the image as Stacked ,i tried with stack,but the textfield doesn't move to top,there is the Screenshot what i am getting,please help me on this
This is what i am getting
Code
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 180,
width: double.infinity,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.asset(
'assets/images/banner1.jpeg',
width: double.infinity,
fit: BoxFit.fitWidth,
);
},
itemCount: 3,
pagination: new SwiperPagination(
margin: new EdgeInsets.only(right: 200, bottom: 20)),
control: new SwiperControl(),
autoplay: true,
),
),
Padding(
padding: EdgeInsets.only(top: 0, left: 30, right: 30),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orangeAccent[200], width: 4.0),
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
),
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 110,
width: size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
);
},
),
),
],
),
),
],
),
],
),
),
),
);
