How can I go to the correct index?

Question

When I search, it goes according to the index of the query list. Like here. So it goes to the wrong page. I want the list to go according to its own index. How can I get the right index and apply it here:

Navigator.push(context,
              MaterialPageRoute(builder: (context) => DetailPage(index)));

buildSuggestions under SearchDelegate:

@override
  Widget buildSuggestions(BuildContext context) {
    final suggestionList = query.isEmpty
        ? [" "]
        : MyData.TEAM_NAME
            .where((p) => p.toLowerCase().contains(query.toLowerCase()))
            .toList();

    return ListView.builder(
      itemBuilder: (context, index) => ListTile(
        onTap: () {
          close(context, suggestionList[index]);
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => DetailPage(index)));
        },
        title: Text(suggestionList[index]),
      ),
      itemCount: suggestionList.length,
    );
  }

MyData List:

class MyData {
  static const List<String> TEAM_NAME = [
    "team1 name",
    "team2 name",
    "abc Team",
    "xyz"
  ];

  static const List<String> INFO1 = [
    "team 1 first info",
    "team2 info1",
    "abc's info",
    "xyz's info1"
  ];
  static const List<String> INFO2 = [
    "team 1 second info",
    "team2 info2",
    "abc's info 2",
    "xyz's info2"
  ];
}

DetailPage

class DetailPage extends StatelessWidget {
  int incomingIndex;
  TeamModel chosenTeam;

  DetailPage(this.incomingIndex);

  @override
  Widget build(BuildContext context) {
    chosenTeam = TeamList.allTeams[incomingIndex];

    return DefaultTabController(
      length: 2,
      child: Scaffold(
          appBar: AppBar(
            title: Text(chosenTeam.teamName),
            bottom: TabBar(tabs: [
              Tab(
                text: "tab1",
              ),
              Tab(
                text: "tab2",
              ),
            ]),
          ),
          body: TabBarView(
            children: [
              SingleChildScrollView(
                  child: Center(
                      child: Text(
                chosenTeam.info,
                style: TextStyle(fontSize: 33),
              ))),
              SingleChildScrollView(
                  child: Center(
                      child: Text(
                chosenTeam.info2,
                style: TextStyle(fontSize: 33),
              ))),
            ],
          )),
    );
  }
}

Answer 1

After see to your video link I find out that, You are send index to next page(not item Id or name).

Means

Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage(index))); },

For better understand, I simply this,

For first time list has 4 item show. And you click on 3rd item and after clicking right data is shown because you send 3rd index, Also in Detail page you get data from 3rd index and show text.

But on search item example (xyz..) your data shown in first index.and then you click and send index to next page its 1st position index.so its show team 1 name data.

In short you are sending index in DetailPage,that's take problem in search. So for right way assign Id to list items.

Answer 2

MyData.TEAM_NAME.where((p) => p.toLowerCase().contains(query.toLowerCase())).toList(); creates a new List with found elements in it, that's why the indicies are not corresponding.

You can change the code like this:

@override
  Widget buildSuggestions(BuildContext context) {
    final suggestionList = query.isEmpty
        ? [" "]
        : MyData.TEAM_NAME
            .where((p) => p.toLowerCase().contains(query.toLowerCase()))
            .toList();

    return ListView.builder(
      itemBuilder: (context, index) => ListTile(
        onTap: () {
          close(context, suggestionList[index]);
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => DetailPage( MyData.TEAM_NAME.indexWhere((item)=> item == suggestionList[index]) )));
        },
        title: Text(suggestionList[index]),
      ),
      itemCount: suggestionList.length,
    );
  }