質問編集履歴

5

追記

2023/01/23 02:46

投稿

Jedda
Jedda

スコア80

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

追記

2023/01/23 02:43

投稿

Jedda
Jedda

スコア80

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

追記

2023/01/23 02:41

投稿

Jedda
Jedda

スコア80

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

修正

2023/01/22 21:44

投稿

Jedda
Jedda

スコア80

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

修正

2023/01/22 20:20

投稿

Jedda
Jedda

スコア80

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