Home > Software engineering >  why onTap of inkwell is not working ? I tried at every place but its is not working
why onTap of inkwell is not working ? I tried at every place but its is not working

Time:05-08

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),
                        ),
                      )
                  )
                )
              )
            )
          )
        )
      ) 
  • Related