Вы можете скопировать и вставить полный код ниже
Шаг 1: Вы можете добавить Widget page к своему Model
Шаг 2: Инициализировать _list с вашим PageNo()
Шаг 3: В Card s onTap используйте Navigator.push model.page
фрагмент кода
class Model {
String id;
String name;
String title;
Widget page;
Model({this.id, this.name, this.title, this.page});
}
...
void init() {
_list = List();
_list.add(
Model(id: "1", name: "name 1", title: "a title 1", page: Page1()),
);
_list.add(
Model(id: "2", name: "name 2", title: "a title 2", page: Page2()),
);
...
return Card(
margin: EdgeInsets.fromLTRB(5, 5, 5, 7),
elevation: 10.0,
child: InkWell(
splashColor: Colors.orange,
onTap: () {
print(model.id);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => model.page),
);
},
рабочая демонстрация
введите описание изображения здесь
полный код
import 'package:flutter/material.dart';
class Model {
String id;
String name;
String title;
Widget page;
Model({this.id, this.name, this.title, this.page});
}
class SearchList extends StatefulWidget {
SearchList({Key key}) : super(key: key);
@override
_SearchListState createState() => _SearchListState();
}
class _SearchListState extends State<SearchList> {
Widget appBarTitle = Text(
"Search Demo",
style: TextStyle(color: Colors.white),
);
Icon actionIcon = Icon(
Icons.search,
color: Colors.orange,
);
final key = GlobalKey<ScaffoldState>();
final TextEditingController _searchQuery = TextEditingController();
List<Model> _list;
List<Model> _searchList = List();
bool _IsSearching;
String _searchText = "";
@override
void initState() {
super.initState();
_IsSearching = false;
init();
}
void init() {
_list = List();
_list.add(
Model(id: "1", name: "name 1", title: "a title 1", page: Page1()),
);
_list.add(
Model(id: "2", name: "name 2", title: "a title 2", page: Page2()),
);
_list.add(
Model(id: "3", name: "name 3", title: "b title 3", page: Page3()),
);
_list.add(
Model(id: "4", name: "name 4", title: "b title 4", page: Page4()),
);
_list.add(
Model(id: "5", name: "name 5", title: "b title 5", page: Page5()),
);
_searchList = _list;
_searchQuery.addListener(() {
if (_searchQuery.text.isEmpty) {
setState(() {
_IsSearching = false;
_searchText = "";
_buildSearchList();
});
} else {
setState(() {
_IsSearching = true;
_searchText = _searchQuery.text;
_buildSearchList();
});
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: key,
appBar: buildBar(context),
body: GridView.builder(
itemCount: _searchList.length,
itemBuilder: (context, index) {
return GridItem(_searchList[index]);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
)));
}
List<Model> _buildSearchList() {
if (_searchText.isEmpty) {
return _searchList = _list;
} else {
_searchList = _list
.where((element) =>
element.name.toLowerCase().contains(_searchText.toLowerCase()) ||
element.title.toLowerCase().contains(_searchText.toLowerCase()))
.toList();
print('${_searchList.length}');
return _searchList;
}
}
Widget buildBar(BuildContext context) {
return AppBar(
centerTitle: true,
title: appBarTitle,
iconTheme: IconThemeData(color: Colors.orange),
backgroundColor: Colors.black,
actions: <Widget>[
IconButton(
icon: actionIcon,
onPressed: () {
setState(() {
if (this.actionIcon.icon == Icons.search) {
this.actionIcon = Icon(
Icons.close,
color: Colors.orange,
);
this.appBarTitle = TextField(
controller: _searchQuery,
style: TextStyle(
color: Colors.orange,
),
decoration: InputDecoration(
hintText: "Search here..",
hintStyle: TextStyle(color: Colors.white)),
);
_handleSearchStart();
} else {
_handleSearchEnd();
}
});
},
),
]);
}
void _handleSearchStart() {
setState(() {
_IsSearching = true;
});
}
void _handleSearchEnd() {
setState(() {
this.actionIcon = Icon(
Icons.search,
color: Colors.orange,
);
this.appBarTitle = Text(
"Search Demo",
style: TextStyle(color: Colors.white),
);
_IsSearching = false;
_searchQuery.clear();
});
}
}
class GridItem extends StatelessWidget {
final Model model;
GridItem(this.model);
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.fromLTRB(5, 5, 5, 7),
elevation: 10.0,
child: InkWell(
splashColor: Colors.orange,
onTap: () {
print(model.id);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => model.page),
);
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18.0 / 11.0,
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.scaleDown,
),
),
Padding(
padding: EdgeInsets.fromLTRB(10.0, 15.0, 0.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
this.model.name,
style: TextStyle(
fontFamily: 'Raleway',
fontWeight: FontWeight.bold,
fontSize: 14.0),
maxLines: 1,
),
SizedBox(height: 0.0),
Text(
model.title,
style: TextStyle(fontFamily: 'Roboto'),
),
],
),
),
],
),
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SearchList(),
);
}
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('Page1')),
);
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('Page2')),
);
}
}
class Page3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('Page3')),
);
}
}
class Page4 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('Page4')),
);
}
}
class Page5 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('Page5')),
);
}
}