Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fc297b0

Browse files
Add cart page
1 parent b658e33 commit fc297b0

File tree

2 files changed

+218
-7
lines changed

2 files changed

+218
-7
lines changed

‎lib/main.dart

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'package:day34/pages/cart.dart';
12
import 'package:day34/pages/explore.dart';
23
import 'package:day34/pages/notification.dart';
34
import 'package:day34/pages/profile.dart';
@@ -26,7 +27,7 @@ class _HomePageState extends State<HomePage> {
2627
List<Widget> pages = [
2728
ExplorePage(),
2829
SearchPage(),
29-
NotificationPage(),
30+
CartPage(),
3031
ProfilePage()
3132
];
3233

@@ -44,7 +45,7 @@ class _HomePageState extends State<HomePage> {
4445

4546
super.initState();
4647
}
47-
48+
4849
@override
4950
Widget build(BuildContext context) {
5051
return Scaffold(
@@ -61,19 +62,19 @@ class _HomePageState extends State<HomePage> {
6162
onItemSelected: (index) => _onItemTapped(index),
6263
items: [
6364
FlashyTabBarItem(
64-
icon: Icon(Icons.home_outlined, size: 25),
65+
icon: Icon(Icons.home_outlined, size: 23),
6566
title: Text('Home'),
6667
),
6768
FlashyTabBarItem(
68-
icon: Icon(Icons.search, size: 25),
69+
icon: Icon(Icons.search, size: 23),
6970
title: Text('Search'),
7071
),
7172
FlashyTabBarItem(
72-
icon: Icon(Icons.notifications_outlined, size: 25),
73-
title: Text('Notifications'),
73+
icon: Icon(Icons.shopping_bag_outlined, size: 23),
74+
title: Text('Cart'),
7475
),
7576
FlashyTabBarItem(
76-
icon: Icon(Icons.account_circle_outlined, size: 25,),
77+
icon: Icon(Icons.account_circle_outlined, size: 23,),
7778
title: Text('Profile'),
7879
),
7980
],

‎lib/pages/cart.dart

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import 'dart:convert';
2+
3+
import 'package:day34/animation/FadeAnimation.dart';
4+
import 'package:day34/models/product.dart';
5+
import 'package:day34/pages/product_view.dart';
6+
import 'package:dotted_border/dotted_border.dart';
7+
import 'package:flutter/material.dart';
8+
import 'package:flutter/services.dart';
9+
10+
class CartPage extends StatefulWidget {
11+
const CartPage({ Key? key }) : super(key: key);
12+
13+
@override
14+
_CartPageState createState() => _CartPageState();
15+
}
16+
17+
class _CartPageState extends State<CartPage> {
18+
List<dynamic> cartItems = [];
19+
List<int> cartItemCount = [1, 1, 1, 1];
20+
21+
Future<void> fetchItems() async {
22+
final String response = await rootBundle.loadString('assets/products.json');
23+
final data = await json.decode(response);
24+
25+
setState(() {
26+
cartItems = data['products']
27+
.map((data) => Product.fromJson(data)).toList();
28+
});
29+
}
30+
31+
@override
32+
void initState() {
33+
// TODO: implement initState
34+
fetchItems();
35+
super.initState();
36+
}
37+
38+
@override
39+
Widget build(BuildContext context) {
40+
return Scaffold(
41+
appBar: AppBar(
42+
elevation: 0,
43+
backgroundColor: Colors.transparent,
44+
title: Text('My Cart', style: TextStyle(color: Colors.black)),
45+
),
46+
body: SingleChildScrollView(
47+
child: Column(
48+
children: <Widget>[
49+
Container(
50+
padding: EdgeInsets.symmetric(horizontal: 20),
51+
height: MediaQuery.of(context).size.height * 0.53,
52+
child: ListView.builder(
53+
scrollDirection: Axis.vertical,
54+
itemCount: cartItems.length,
55+
itemBuilder: (context, index) {
56+
return cartItem(cartItems[index], index);
57+
}
58+
),
59+
),
60+
SizedBox(height: 30),
61+
FadeAnimation(1.2,
62+
Container(
63+
padding: EdgeInsets.symmetric(horizontal: 20),
64+
child: Row(
65+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
66+
children: <Widget>[
67+
Text('Shipping', style: TextStyle(fontSize: 20)),
68+
Text('\$5.99', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))
69+
],
70+
),
71+
),
72+
),
73+
FadeAnimation(1.3, Padding(
74+
padding: EdgeInsets.all(20.0),
75+
child: DottedBorder(
76+
color: Colors.grey.shade400,
77+
dashPattern: [10, 10],
78+
padding: EdgeInsets.all(0),
79+
child: Container()
80+
),
81+
)),
82+
FadeAnimation(1.3, Container(
83+
padding: EdgeInsets.symmetric(horizontal: 20),
84+
child: Row(
85+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
86+
children: <Widget>[
87+
Text('Total', style: TextStyle(fontSize: 20)),
88+
Text('\$200', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))
89+
],
90+
),
91+
)),
92+
SizedBox(height: 10),
93+
FadeAnimation(1.4, Padding(
94+
padding: EdgeInsets.all(20.0),
95+
child: MaterialButton(
96+
onPressed: () {},
97+
height: 50,
98+
elevation: 0,
99+
splashColor: Colors.yellow[700],
100+
shape: RoundedRectangleBorder(
101+
borderRadius: BorderRadius.circular(10)
102+
),
103+
color: Colors.yellow[800],
104+
child: Center(
105+
child: Text("Payment", style: TextStyle(color: Colors.white, fontSize: 18),),
106+
),
107+
),
108+
))
109+
]
110+
)
111+
)
112+
);
113+
}
114+
115+
cartItem(Product product, int index) {
116+
return GestureDetector(
117+
onTap: () {
118+
Navigator.push(context, MaterialPageRoute(builder: (context) => ProductViewPage(product: product)));
119+
},
120+
child: FadeAnimation(1,
121+
Container(
122+
margin: EdgeInsets.only(bottom: 20),
123+
padding: EdgeInsets.symmetric(horizontal: 10),
124+
decoration: BoxDecoration(
125+
color: Colors.white,
126+
borderRadius: BorderRadius.circular(10),
127+
boxShadow: [
128+
BoxShadow(
129+
color: Colors.grey.shade200,
130+
offset: Offset(0, 2),
131+
blurRadius: 6,
132+
),
133+
],
134+
),
135+
child: Row(
136+
children: <Widget>[
137+
Container(
138+
margin: EdgeInsets.only(right: 10),
139+
child: ClipRRect(
140+
borderRadius: BorderRadius.circular(10),
141+
child: Image.network(
142+
product.imageURL,
143+
fit: BoxFit.cover,
144+
height: 100,
145+
width: 100,
146+
),
147+
),
148+
),
149+
Expanded(
150+
child: Column(
151+
crossAxisAlignment: CrossAxisAlignment.start,
152+
children: <Widget>[
153+
Text(product.brand, style: TextStyle(color: Colors.orange.shade400, fontSize: 14,),),
154+
SizedBox(height: 5,),
155+
Text(product.name,
156+
style: TextStyle(
157+
fontSize: 18,
158+
fontWeight: FontWeight.w600,
159+
),
160+
),
161+
SizedBox(height: 15),
162+
Text(
163+
'\$${product.price}',
164+
style: TextStyle(
165+
fontSize: 20,
166+
color: Colors.grey.shade800,
167+
),
168+
),
169+
SizedBox(height: 10),
170+
]
171+
),
172+
),
173+
Column(
174+
crossAxisAlignment: CrossAxisAlignment.center,
175+
children: [
176+
MaterialButton(
177+
minWidth: 10,
178+
padding: EdgeInsets.all(0),
179+
onPressed: () {
180+
setState(() {
181+
if (cartItemCount[index] > 1) {
182+
cartItemCount[index]--;
183+
}
184+
});
185+
},
186+
shape: CircleBorder(),
187+
child: Icon(Icons.remove_circle_outline, color: Colors.grey.shade400, size: 30,),
188+
),
189+
Container(child: Center(child: Text(cartItemCount[index].toString(), style: TextStyle(fontSize: 20, color: Colors.grey.shade800),),),),
190+
MaterialButton(
191+
padding: EdgeInsets.all(0),
192+
minWidth: 10,
193+
splashColor: Colors.yellow[700],
194+
onPressed: () {
195+
setState(() {
196+
cartItemCount[index]++;
197+
});
198+
},
199+
shape: CircleBorder(),
200+
child: Icon(Icons.add_circle, size: 30,),
201+
),
202+
],
203+
),
204+
]
205+
),
206+
),
207+
),
208+
);
209+
}
210+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /