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),
),
));
}
}
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
],
),
));
}
}