I am new to flutter why onTap of inkwell is not working ? I tried at every place but its is not working anyone, what i am doing wrong in this ? ,please help to solve this , is any alternative is possible please suggest me ..........
InkWell(
onTap: ()=>Search_box(),
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: InkWell(
onTap: ()=>Search_box(),
child: Container(
height: 40,
// search wala container
padding: const EdgeInsets.symmetric(horizontal: 8),
margin: const EdgeInsets.symmetric(horizontal: 3, vertical: 0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey[400], borderRadius: BorderRadius.circular(24)),
child: InkWell(
onTap: (() {
Search_box();
}),
child: Row(
children: [
GestureDetector(
onTap: () {
Search_box();
},
child: Container(
child: const Icon(
Icons.search,
color: Colors.blueAccent,
),
margin: const EdgeInsets.fromLTRB(3, 0, 7, 0),
),
),
Expanded(
child: GestureDetector(
onTap: (){
Search_box();
},
child: InkWell(
onTap: ()=>Search_box(),
child: Container(
child: Text("Lets search someone"),
),
),
),
),
GestureDetector(
onTap: () {
Search_box();
},
child: Container(
child: Icon(
Icons.person,
color: Colors.grey[600],
),
margin: EdgeInsets.fromLTRB(3, 0, 7, 0),
),
CodePudding user response:
The InkWell widget must have a Material widget as an ancestor. The Material widget is where the ink reactions are actually painted
So you Should wrap the inkwell in Material widget
in your case try this
Padding(
padding: const EdgeInsets.only(top: 5),
child: Container(
height: 40,
padding: const EdgeInsets.symmetric(
horizontal: 8),
margin: const EdgeInsets.symmetric(
horizontal: 3, vertical: 0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey[400],
borderRadius:
BorderRadius.circular(24)),
child: Material(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0)),
color: Colors.grey[400],
child: InkWell(
onTap: (() {
// yor method here
}),
child: Row(children: [
Container(
child: const Icon(
Icons.search,
color: Colors.blueAccent,
),
margin:
const EdgeInsets.fromLTRB(
3, 0, 7, 0),
),
Expanded(
child: Container(
child: Text(
"Lets search someone"),
),
),
Container(
child: Icon(
Icons.person,
color: Colors.grey[600],
),
margin: EdgeInsets.fromLTRB(
3, 0, 7, 0),
)
]),
),
),
))
CodePudding user response:
this should work:
Material(
color: Colors.white,
child: InkWell(
onTap: ()=>Search_box(),
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: InkWell(
onTap: ()=>Search_box(),
child: Container(
height: 40,
// search wala container
padding: const EdgeInsets.symmetric(horizontal: 8),
margin: const EdgeInsets.symmetric(horizontal: 3, vertical: 0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey[400], borderRadius: BorderRadius.circular(24)),
child: InkWell(
onTap: (() {
Search_box();
}),
child: Row(
children: [
GestureDetector(
onTap: () {
Search_box();
},
child: Container(
child: const Icon(
Icons.search,
color: Colors.blueAccent,
),
margin: const EdgeInsets.fromLTRB(3, 0, 7, 0),
),
),
Expanded(
child: GestureDetector(
onTap: (){
Search_box();
},
child: InkWell(
onTap: ()=>Search_box(),
child: Container(
child: Text("Lets search someone"),
),
),
),
),
GestureDetector(
onTap: () {
Search_box();
},
child: Container(
child: Icon(
Icons.person,
color: Colors.grey[600],
),
margin: EdgeInsets.fromLTRB(3, 0, 7, 0),
),
)
)
)
)
)
)
)
)