How to make all search results return a different screen in Flutter?

Question

I am going to make an app where it has a search functionality. Quite simple. The problem I am encountering however, is I cannot figure out how to make each result return a different screen. In my example, I have a List with Strings. Let's say we take the string named "Leather" and "Carbon Fiber". When I click the search result "Leather", I want to push a new screen that talks about "Leather". However, when I click on "Carbon Fiber", I would like to push a different screen that talks about "Carbon Fiber". I can make each result tappable, but they all will go to the same screen, and that is not what I want. I am rather new to Flutter; I know I'm doing something wrong, but cannot quite pinpoint what it is. Any help is very much appreciated.

Code for the search screen:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:zund_help/SuperSoup.dart';

List<String> names = ['Fabric', "HR", 'Leather', 'Carbon Fiber'];

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  String? _result;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: const Text('Search'),
          backgroundColor: Colors.blueGrey,
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Text(_result ?? '', style: const TextStyle(fontSize: 18)),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  height: 50,
                  width: 500,
                  child: TextField(
                    keyboardType: TextInputType.text,
                    autocorrect: true,
                    decoration: const InputDecoration(
                        icon: Padding(
                          padding: EdgeInsets.only(left: 8.0, top: 5),
                          child: Icon(Icons.search),
                        ),
                        hintText: 'Type Here...',
                        border: InputBorder.none),
                    cursorColor: Colors.blue,
                    onTap: () async {
                      var result = await showSearch<String>(
                        context: context,
                        delegate: CustomDelegate(),
                      );
                      setState(() => _result = result);
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
class CustomDelegate extends SearchDelegate<String> {
  List<String> data = names.toList();

  @override
  List<Widget> buildActions(BuildContext context) =>
      [IconButton(icon: const Icon(Icons.clear), onPressed: () => query = '')];

  @override
  Widget buildLeading(BuildContext context) => IconButton(
      icon: const Icon(Icons.chevron_left),
      onPressed: () => close(context, ''));

  @override
  Widget buildResults(BuildContext context) => Container();

  @override
  Widget buildSuggestions(BuildContext context) {
    List<String> listToShow;
    if (query.isNotEmpty) {
      listToShow =
          data.where((e) => e.contains(query) && e.startsWith(query)).toList();
    } else {
      listToShow = data;
    }

    return ListView.builder(
      itemCount: listToShow.length,
      itemBuilder: (_, i) {
        var noun = listToShow[i];
        return ListTile(
          title: Text(noun),
          onTap: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SuperSoup(),
            ),
          ),
          // onTap: () => close(context, noun),
        );
      },
    );
  }
}

Answer 1

You may update the onTap method of the buildSuggestions method of the CustomDelegate class like this to achieve your goal:

  Widget buildSuggestions(BuildContext context) {
    List<String> listToShow;
    if (query.isNotEmpty) {
      listToShow =
          data.where((e) => e.contains(query) && e.startsWith(query)).toList();
    } else {
      listToShow = data;
    }

    return ListView.builder(
      itemCount: listToShow.length,
      itemBuilder: (_, i) {
        var noun = listToShow[i];
        return ListTile(
          title: Text(noun),
          onTap: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                if(noun == 'Carbon Fiber'){
                  return CarbonFibreScreen();
                } else if (noun == 'Leather') {
                  return LeatherScreen();
                } 
                // Handle other cases as well similarly
              },
            ),
          ),
          // onTap: () => close(context, noun),
        );
      },
    );
  }