skip to Main Content

I am getting a list of responses from API, and I am using List View Builder and a text widget to display them all at once, so now I will have multiple texts according to the length of the response. How do I make just one particular text have the on-click property so that when I click that one particular text, I can navigate to another page?

3

Answers


  1. Create custom text function like this

    widget createCustomText(String value, Function(String) callback) {
      return InkWell(
        onTap: () {
          callback.call("");
        },
        child: Text(value),
      );
    }
    

    // And use this function inside list return item like this

     return createCustomText("Your List item", (p0) {
        print("Print your value");
      });
    
    Login or Signup to reply.
  2. As you are using ListViewBuilder then there can be two scenarios
    First,
    If you know which particular index’s text you have to make clickable then you can use a direct approach by using index

    ListView.builder(
                      physics: const AlwaysScrollableScrollPhysics(),
                      itemCount: controller.peerUserList.length,
                      shrinkWrap: true,
                      itemBuilder: (context, index){
                          return if(index == 3){
                          // write clickable code here preferably with Inkwell
                          } else{
                          // write your text code for others here
                          }
                     });
    

    Or there can be a scenario of using data of index or from text itself same approach can be used only the condition in if has to be changed according to your usage requirement.

    Login or Signup to reply.
  3. =>You can use an index directly if there is particular index text you need to make clickable After that you can pass data in Navigation

      ListView.builder(
      physics: const AlwaysScrollableScrollPhysics(),
      itemCount: UserList.length,
      shrinkWrap: true,
      itemBuilder: (context, index){
        return InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(user: UserList[index].name),
              ),
            );
          },
          child: Text(UserList[index].name),
        );
      });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search