質問編集履歴
5
追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -249,6 +249,47 @@
|
|
249
249
|
|
250
250
|
```product.dart
|
251
251
|
|
252
|
+
class Product {
|
253
|
+
final int id, price;
|
254
|
+
final String title, description, image;
|
255
|
+
|
256
|
+
Product(
|
257
|
+
{required this.id,
|
258
|
+
required this.price,
|
259
|
+
required this.title,
|
260
|
+
required this.description,
|
261
|
+
required this.image});
|
262
|
+
}
|
263
|
+
|
264
|
+
// list of products
|
265
|
+
// for our demo
|
266
|
+
List<Product> products = [
|
267
|
+
Product(
|
268
|
+
id: 1,
|
269
|
+
price: 56,
|
270
|
+
title: "Classic Leather Arm Chair",
|
271
|
+
image: "assets/images/Item_1.png",
|
272
|
+
description:
|
273
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim",
|
274
|
+
),
|
275
|
+
Product(
|
276
|
+
id: 4,
|
277
|
+
price: 68,
|
278
|
+
title: "Poppy Plastic Tub Chair",
|
279
|
+
image: "assets/images/Item_2.png",
|
280
|
+
description:
|
281
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim",
|
282
|
+
),
|
283
|
+
Product(
|
284
|
+
id: 9,
|
285
|
+
price: 39,
|
286
|
+
title: "Bar Stool Chair",
|
287
|
+
image: "assets/images/Item_3.png",
|
288
|
+
description:
|
289
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim",
|
290
|
+
),
|
291
|
+
];
|
292
|
+
|
252
293
|
```
|
253
294
|
|
254
295
|
### 試したこと
|
@@ -270,6 +311,8 @@
|
|
270
311
|
|
271
312
|
constants.dartはコンスタントに使うpaddingだったりColorをまとめているファイルです。
|
272
313
|
products_screen.dartが商品一覧画面、body.dartが商品詳細画面のファイルです。
|
314
|
+
product_card.dartは一商品の情報ファイル、
|
315
|
+
product.dartはモデルファイルとなっています。
|
273
316
|
不足している情報などありましたら、質問よろしくお願いします。
|
274
317
|
|
275
318
|
学習に使用している動画
|
@@ -278,4 +321,3 @@
|
|
278
321
|
お手本のGitHubのURL
|
279
322
|
https://github.com/abuanwar072/furniture_app_flutter
|
280
323
|
|
281
|
-
|
4
追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -247,6 +247,10 @@
|
|
247
247
|
|
248
248
|
```
|
249
249
|
|
250
|
+
```product.dart
|
251
|
+
|
252
|
+
```
|
253
|
+
|
250
254
|
### 試したこと
|
251
255
|
|
252
256
|
Youtubeの動画を見ながらFlutterのUI構築の方法を勉強しており、一通り完成はしたものの、メインの商品一覧の商品カードをタップすると詳細画面に遷移するというのが動画内では実現されているもののこちらでは遷移しないという状態です。おそらくですがクラスの呼び出しができていないとかその辺りだとは思うのですが、15分たっても解決できなかったため、質問させていただくことにしました。
|
3
追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -134,6 +134,119 @@
|
|
134
134
|
|
135
135
|
```
|
136
136
|
|
137
|
+
```product_card.dart
|
138
|
+
import 'package:flutter/material.dart';
|
139
|
+
import 'package:furniture_app/models/product.dart';
|
140
|
+
|
141
|
+
import '../../../constants.dart';
|
142
|
+
|
143
|
+
class ProductCard extends StatelessWidget {
|
144
|
+
const ProductCard({
|
145
|
+
Key? key,
|
146
|
+
required this.itemIndex,
|
147
|
+
required this.product,
|
148
|
+
required this.press,
|
149
|
+
}) : super(key: key);
|
150
|
+
|
151
|
+
final int itemIndex;
|
152
|
+
final Product product;
|
153
|
+
final Function press;
|
154
|
+
|
155
|
+
@override
|
156
|
+
Widget build(BuildContext context) {
|
157
|
+
Size size = MediaQuery.of(context).size;
|
158
|
+
return Container(
|
159
|
+
margin: EdgeInsets.symmetric(
|
160
|
+
horizontal: kDefaultPadding,
|
161
|
+
vertical: kDefaultPadding / 2,
|
162
|
+
),
|
163
|
+
// color: Colors.blueAccent,
|
164
|
+
height: 160,
|
165
|
+
child: InkWell(
|
166
|
+
onTap: () {},
|
167
|
+
child: Stack(
|
168
|
+
alignment: Alignment.bottomCenter,
|
169
|
+
children: <Widget>[
|
170
|
+
Container(
|
171
|
+
height: 136,
|
172
|
+
decoration: BoxDecoration(
|
173
|
+
borderRadius: BorderRadius.circular(22),
|
174
|
+
color: itemIndex.isEven ? kBlueColor : kSecondaryColor,
|
175
|
+
boxShadow: [kDefaultShadow],
|
176
|
+
),
|
177
|
+
child: Container(
|
178
|
+
margin: EdgeInsets.only(right: 10),
|
179
|
+
decoration: BoxDecoration(
|
180
|
+
color: Colors.white,
|
181
|
+
borderRadius: BorderRadius.circular(22),
|
182
|
+
),
|
183
|
+
),
|
184
|
+
),
|
185
|
+
Positioned(
|
186
|
+
top: 0,
|
187
|
+
right: 0,
|
188
|
+
child: Hero(
|
189
|
+
tag: '${product.id}',
|
190
|
+
child: Container(
|
191
|
+
padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),
|
192
|
+
height: 160,
|
193
|
+
width: 200,
|
194
|
+
child: Image.asset(
|
195
|
+
product.image,
|
196
|
+
fit: BoxFit.cover,
|
197
|
+
),
|
198
|
+
),
|
199
|
+
),
|
200
|
+
),
|
201
|
+
Positioned(
|
202
|
+
bottom: 0,
|
203
|
+
left: 0,
|
204
|
+
child: SizedBox(
|
205
|
+
height: 136,
|
206
|
+
width: size.width - 200,
|
207
|
+
child: Column(
|
208
|
+
crossAxisAlignment: CrossAxisAlignment.start,
|
209
|
+
children: <Widget>[
|
210
|
+
Spacer(),
|
211
|
+
Padding(
|
212
|
+
padding: const EdgeInsets.symmetric(
|
213
|
+
horizontal: kDefaultPadding),
|
214
|
+
child: Text(
|
215
|
+
product.title,
|
216
|
+
style: Theme.of(context).textTheme.button,
|
217
|
+
),
|
218
|
+
),
|
219
|
+
Spacer(),
|
220
|
+
Container(
|
221
|
+
padding: EdgeInsets.symmetric(
|
222
|
+
horizontal: kDefaultPadding * 1.5,
|
223
|
+
vertical: kDefaultPadding / 4,
|
224
|
+
),
|
225
|
+
decoration: BoxDecoration(
|
226
|
+
color: kSecondaryColor,
|
227
|
+
borderRadius: BorderRadius.only(
|
228
|
+
bottomLeft: Radius.circular(22),
|
229
|
+
topRight: Radius.circular(22),
|
230
|
+
),
|
231
|
+
),
|
232
|
+
child: Text(
|
233
|
+
"\$${product.price}",
|
234
|
+
style: Theme.of(context).textTheme.button,
|
235
|
+
),
|
236
|
+
),
|
237
|
+
],
|
238
|
+
),
|
239
|
+
),
|
240
|
+
),
|
241
|
+
],
|
242
|
+
),
|
243
|
+
),
|
244
|
+
);
|
245
|
+
}
|
246
|
+
}
|
247
|
+
|
248
|
+
```
|
249
|
+
|
137
250
|
### 試したこと
|
138
251
|
|
139
252
|
Youtubeの動画を見ながらFlutterのUI構築の方法を勉強しており、一通り完成はしたものの、メインの商品一覧の商品カードをタップすると詳細画面に遷移するというのが動画内では実現されているもののこちらでは遷移しないという状態です。おそらくですがクラスの呼び出しができていないとかその辺りだとは思うのですが、15分たっても解決できなかったため、質問させていただくことにしました。
|
2
修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -152,6 +152,7 @@
|
|
152
152
|
[✓] HTTP Host Availability
|
153
153
|
|
154
154
|
constants.dartはコンスタントに使うpaddingだったりColorをまとめているファイルです。
|
155
|
+
products_screen.dartが商品一覧画面、body.dartが商品詳細画面のファイルです。
|
155
156
|
不足している情報などありましたら、質問よろしくお願いします。
|
156
157
|
|
157
158
|
学習に使用している動画
|
1
修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -152,6 +152,7 @@
|
|
152
152
|
[✓] HTTP Host Availability
|
153
153
|
|
154
154
|
constants.dartはコンスタントに使うpaddingだったりColorをまとめているファイルです。
|
155
|
+
不足している情報などありましたら、質問よろしくお願いします。
|
155
156
|
|
156
157
|
学習に使用している動画
|
157
158
|
https://youtu.be/bkR7naR1efA
|