'why onTap of inkwell is not working ? I tried at every place but its is not working
I am new to flutter. why onTap of inkwell is not working? I tried at every place but its is not working. what am i doing wrong in this? is any alternative possible?
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),
),
Solution 1:[1]
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),
)
]),
),
),
))
Solution 2:[2]
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),
),
)
)
)
)
)
)
)
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | AJ989 |