How to add specific text and images after the search result page?

Question

The code below is as far as I have gotten so far. The search function works and when clicking on let's say "Google" you will come to a new page specific to "Google".

But I am unsure now how I can add specific text and images to the page. I for example don't want Facebook information to be put on a Google page. Is the smart to make a new List? What other options are there and how would I go about doing so?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Example"),
        actions: [
          IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                showSearch(context: context, delegate: SearchItem());
              }),
        ],
      ),
    );
  }
}

final List<String> myList = [
  "google",
  "IOS",
  "Android",
  "Linux",
  "MacOS",
  "Windows"
];

class SearchItem extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            query = "";
          })
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: AnimatedIcon(
          icon: AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {}

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionsList = query.isEmpty
        ? myList
        : myList
        .where((p) => p.toLowerCase().contains(query.toLowerCase()))
        .toList();

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

class DetailScreen extends StatelessWidget {
  final int index;

  DetailScreen(this.index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("${myList[index]}"),),
        body: Center(
          child: Text(
            "${myList[index]}",style: TextStyle(fontSize: 22),
          ),
        ));
  }
} 

Answer 1

Not Sure What you are trying to say, But If you Want to show more number of items on the Details Page, then in That Case you Can Create A class Which can Have all those items included in it, Which you want to show the in the details class.

Here is the working Code For the same, Please check

import 'package:flutter/material.dart';

//Below it the new Class you Will Need, or We can say a Modal You Need to have all your properties of the class,
//Which you wanna show in details page
class MyPlatforms {
  String name;
  String image;
  MyPlatforms({this.image, this.name});
}

//A MyPlatforms list created using that modal
final List<MyPlatforms> myPlatformsList = [
  MyPlatforms(image: "assets/images/google.png", name: "Google"),
  MyPlatforms(image: "assets/images/ios.png", name: "IOS"),
  MyPlatforms(image: "assets/images/linux.png", name: "Linux"),
  MyPlatforms(image: "assets/images/android.png", name: "Android"),
  MyPlatforms(image: "assets/images/mac.png", name: "MacOS"),
  MyPlatforms(image: "assets/images/windows.png", name: "Windows"),
];

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Example"),
        actions: [
          IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                showSearch(context: context, delegate: SearchItem());
              }),
        ],
      ),
    );
  }
}

final List<String> myList = [
  "google",
  "IOS",
  "Android",
  "Linux",
  "MacOS",
  "Windows"
];

class SearchItem extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            query = "";
          })
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: AnimatedIcon(
          icon: AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {}

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestionsList = query.isEmpty
        ? myList
        : myList
            .where((p) => p.toLowerCase().contains(query.toLowerCase()))
            .toList();

    return ListView.builder(
      itemBuilder: (context, index) => ListTile(
        onTap: () {
          close(context, suggestionsList[index]);
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => DetailScreen(
                        item: myPlatformsList[
                            index], //pass the index of the MyPlatforms list
                      )));
        },
        title: Text(suggestionsList[index]),
      ),
      itemCount: suggestionsList.length,
    );
  }
}

class DetailScreen extends StatelessWidget {
  final MyPlatforms
      item; //Get the item, as a object of MyPlatforms class so the we can acess its all properties like image and name;

  DetailScreen({this.item});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("${item.name}"),
        ),
        body: Center(
          child: new Column(
            children: [
              Text(
                "${item.name}", //acessing the name property of the  MyPlatforms class
                style: TextStyle(fontSize: 22),
              ),
              SizedBox(
                height: 20.0,
              ),
              Image.asset(
                  "${item.image}"), //acessing the image property of the  MyPlatforms class
            ],
          ),
        ));
  }
}