Home Screen
import 'package:flutter/material.dart';
import 'package:shoes_app/Widget/Navigation.dart';
import 'package:shoes_app/Widget/Shoetile.dart';
import 'package:shoes_app/model/Shoemodel.dart';
class Homescreen extends StatelessWidget {
Homescreen({super.key});
final searchController = TextEditingController();
final List<Shoemodel> shoelist = [
Shoemodel(
description:
"The Nike Dunk Low is an easy score for your closet. This mid-80s hoops icon returns with super-durable construction and original colors. With ankle padding and rubber traction, this one is a slam dunk.",
imagepath: "assets/images/Shoe1.png",
name: "Nike Dunk Low",
pricing: "\$90"),
Shoemodel(
description:
"The Nike Dunk Low is an easy score for your closet. This mid-80s hoops icon returns with super-durable construction and original colors. With ankle padding and rubber traction, this one is a slam dunk.",
imagepath: "assets/images/shoe2.png",
name: "Nike Air Max 90",
pricing: "\$89.97"),
Shoemodel(
description:
"The Nike Dunk Low is an easy score for your closet. This mid-80s hoops icon returns with super-durable construction and original colors. With ankle padding and rubber traction, this one is a slam dunk.",
imagepath: "assets/images/shoe3.png",
name: "Nike Air Max 90",
pricing: "\$89.97"),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.menu,
size: 30,
),
),
),
const SizedBox(
height: 30,
),
Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: TextFormField(
controller: searchController,
style: const TextStyle(color: Colors.black),
decoration: InputDecoration(
label: const Text("Search Here"),
prefixIcon: const Icon(Icons.search),
suffixIcon: IconButton(
onPressed: () {
searchController.clear();
},
icon: const Icon(Icons.clear)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18))),
),
),
const SizedBox(
height: 30,
),
Center(
child: Text(
"Everyone Flies... Some Fly Longer Than Others",
style: TextStyle(color: Colors.black.withOpacity(0.5)),
),
),
const Padding(
padding: EdgeInsets.only(left: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
"Hot Picks",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(right: 15),
child: Text(
"see all",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
fontSize: 15),
),
),
],
),
),
Expanded(
child: ListView.builder(
itemCount: shoelist.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Shoetile(shoemodel: shoelist[index]);
},
),
),
],
),
bottomNavigationBar: const Navigation(),
);
}
}
Shoetile Screen
import 'package:flutter/material.dart';
import 'package:shoes_app/Screen/Detailscreen.dart';
import 'package:shoes_app/model/Shoemodel.dart';
class Shoetile extends StatelessWidget {
const Shoetile({super.key, required this.shoemodel});
final Shoemodel shoemodel;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 5),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Detailscreen(model: shoemodel),
),
);
},
child: Container(
width: 300,
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.8),
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: [
Hero(
tag: shoemodel.name, // Unique tag
child: Image.asset(
shoemodel.imagepath,
),
),
const SizedBox(
height: 20,
),
Text(
shoemodel.name,
style:
const TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
const SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Text(
shoemodel.description,
style: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
shoemodel.pricing,
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
SizedBox(
height: 60,
width: 70,
child: FloatingActionButton(
backgroundColor: Colors.black,
onPressed: () {},
child: const Icon(
Icons.add,
color: Colors.white,
),
),
),
],
),
],
),
),
),
);
}
}
``` Detail Screen
导入'包：flutter/material.dart'; 导入'包：shoes_app/model/Shoemodel.dart';
类 Detailscreen 扩展 StatelessWidget { const Detailscreen({super.key, 必需 this.model});
最终鞋模模型；
@覆盖 小部件构建（BuildContext上下文）{ 返回脚手架（ 正文：列（ 孩子们： [ 排（ mainAxisAlignment：MainAxisAlignment.spaceBetween， 孩子们： [ 填充（ 填充：const EdgeInsets.only（顶部：40）， 子：图标按钮（ 样式： IconButton.styleFrom(backgroundColor: Colors.black), 按下时：() { 导航器.pop(上下文); }, 图标：常量图标（ 图标.arrow_back， 颜色: 颜色.白色, ), ), ), 填充（ 填充：const EdgeInsets.only（顶部：40）， 孩子：文本（ 型号名称， 样式：const TextStyle( fontWeight: FontWeight.bold, fontSize: 25), ), ), 填充（ 填充：const EdgeInsets.only（顶部：40）， 子：图标按钮（ 样式： IconButton.styleFrom(backgroundColor: Colors.black), 按下时：() { 导航器.pop(上下文); }, 图标：常量图标（ 图标.搜索， 颜色: 颜色.白色, ), ), ), ], ), 大小框( 宽度：500， 高度：300， 孩子：英雄（ tag: model.name, // 唯一标签 子：Image.asset(model.imagepath), ), ), 常量大小框( 高度：20， ), 容器（ 装饰：BoxDecoration( 颜色：Colors.grey.withOpacity(0.5), ), ), ], ), ）； } }
import 'package:flutter/material.dart';
import 'package:shoes_app/model/Shoemodel.dart';
class Detailscreen extends StatelessWidget {
const Detailscreen({super.key, required this.model});
final Shoemodel model;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(top: 40),
child: IconButton(
style: IconButton.styleFrom(backgroundColor: Colors.black),
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 40),
child: Text(
model.name,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
),
Padding(
padding: const EdgeInsets.only(top: 40),
child: IconButton(
style: IconButton.styleFrom(backgroundColor: Colors.black),
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.search,
color: Colors.white,
),
),
),
],
),
SizedBox(
width: 500,
height: 300,
child: Hero(
tag: model.name, // Unique tag
child: Image.asset(model.imagepath),
),
),
const SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5),
),
),
],
),
);
}
}
只需确保所有
FloatingActionButtonheroTage例如：
Column(
children:[
FloatingActionButton(
child: Text('1'),
onPressed:(){},
heroTag: UniqueKey().toString(), // or explicitly provide a unique string
),
]
)
我建议通过设置
为应用程序中使用的所有 FAB 提供一个唯一的
heroTag
heroTag : UniqueKey().toString()