这是我的第一个项目Flutter。我一直在尝试使列表瓷砖可点击每个导航到不同的页面,我尝试了手势检测器,墨水井,但我不知道我在做什么。
this is the ListView
网站首页
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:plantel/screens/widgets/plant_tile.dart';
import 'package:plantel/screens/widgets/shop.dart';
import 'package:provider/provider.dart';
import 'package:plantel/screens/widgets/homelist.dart';
import 'package:google_fonts/google_fonts.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
void handleClick(String value) {
switch (value) {
case 'Feedback':
break;
case 'Dark theme':
break;
}
}
class _HomePageState extends State<HomePage> {
Icon customIcon = const Icon(Icons.search);
Widget customSearchBar = const Text('Home');
TextEditingController textController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: customSearchBar,
foregroundColor: Colors.grey.shade200,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25),
),
),
backgroundColor: const Color.fromARGB(255, 97, 122, 85),
elevation: 0,
actions: <Widget>[
IconButton(
color: Colors.grey.shade200,
onPressed: () {
setState(() {
if (customIcon.icon == Icons.search) {
customIcon = const Icon(Icons.cancel);
customSearchBar = ListTile(
leading: Icon(
Icons.search,
color: Colors.grey.shade200,
size: 28,
),
title: TextField(
decoration: InputDecoration(
hintText: 'Search Plantel',
hintStyle: TextStyle(
color: Colors.grey.shade200,
fontSize: 18,
fontStyle: FontStyle.italic,
),
border: InputBorder.none,
),
style: TextStyle(
color: Colors.grey.shade200,
),
),
);
} else {
customIcon = const Icon(Icons.search);
customSearchBar = const Text('Home');
}
});
},
icon: customIcon,
),
PopupMenuButton<String>(
onSelected: handleClick,
color: Colors.grey.shade200,
itemBuilder: (BuildContext context) {
return {'Feedback', 'Dark theme'}.map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
),
],
),
backgroundColor: Colors.grey[200],
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.grey.shade200,
color: const Color.fromARGB(255, 97, 122, 85),
animationDuration: const Duration(milliseconds: 300),
items: [
Icon(
Icons.home,
color: Colors.grey.shade200,
),
Icon(
Icons.favorite,
color: Colors.grey.shade200,
),
Icon(
Icons.shopping_cart,
color: Colors.grey.shade200,
),
Icon(
Icons.person,
color: Colors.grey.shade200,
),
],
),
body: Consumer<PlantShop>(
builder: (context, value, child) => SafeArea(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Column(
children: [
const SizedBox(
height: 25,
),
Expanded(
child: ListView.builder(
itemCount: value.plantShop.length,
itemBuilder: (context, index) {
Plant eachPlant = value.plantShop[index];
return PlantTile(
plant: eachPlant,
);
},
))
],
),
),
),
),
);
}
}
class PlantTile extends StatelessWidget {
PlantTile({super.key, required this.plant});
final Plant plant;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: const Color.fromARGB(255, 218, 218, 218),
borderRadius: BorderRadius.circular(10)),
margin: const EdgeInsets.only(bottom: 20),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 25),
child: ListTile(
title: Text(
plant.title,
style: GoogleFonts.anton(color: Colors.black, fontSize: 18),
),
subtitle: Text(plant.description,
style: GoogleFonts.ptSansNarrow(color: Colors.black, fontSize: 16)),
leading: Image.asset(plant.imageSrc),
selectedColor: plant.color,
),
);
}
}
class Plant {
final String title;
final String description;
final String imageSrc;
final Color color;
Plant(
{required this.title,
required this.color,
required this.description,
required this.imageSrc});
}
class PlantShop extends ChangeNotifier {
final List<Plant> _shop = [
Plant(
title: "Indoor plants",
description: "An ornamental plants that is grown indoors",
imageSrc: "assets/images/indoorplant.png",
color: Color.fromARGB(255, 0, 0, 0),
),
Plant(
title: "Outdoor plants",
description: "Plants that produces oxygen and absorb carbon dioxide",
imageSrc: "assets/images/outdoorplant.png",
color: Color.fromARGB(255, 0, 0, 0),
),
Plant(
title: "Vases",
description: "An open container for holding plants",
imageSrc: "assets/images/vase.png",
color: Color.fromARGB(255, 0, 0, 0),
),
];
// get plant list
List<Plant> get plantShop => _shop;
}
我试着看youtube教程和在github上搜索,但没有一个对我有用。有没有可能做到这一点,或者我应该怎么做?
1条答案
按热度按时间9ceoxa921#
在
ListTile
构造函数上使用onTap:
属性。