質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

583閲覧

メインの商品一覧画面から詳細画面に遷移するようにしたい。

ituking

総合スコア80

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2023/01/22 20:16

編集2023/01/23 02:46

前提

FlutterのUI構築の仕方を勉強するにあたり、Youtubeの動画を真似して勉強しています。

実現したいこと

  • メインの商品一覧画面から詳細画面に遷移するようにしたい。

発生している問題・エラーメッセージ

メインの商品一覧画面から詳細画面に切り替わらない。

該当のソースコード

products_screen.dart

1import 'package:flutter/material.dart'; 2import 'package:flutter_svg/svg.dart'; 3import 'package:furniture_app/constants.dart'; 4 5import 'components/body.dart'; 6 7class ProductsScreen extends StatelessWidget { 8 @override 9 Widget build(BuildContext context) { 10 return Scaffold( 11 backgroundColor: kPrimaryColor, 12 appBar: buildAppBar(), 13 body: Body(), 14 ); 15 } 16 17 AppBar buildAppBar() { 18 return AppBar( 19 elevation: 0, 20 title: Text("Dashboard"), 21 centerTitle: false, 22 actions: <Widget>[ 23 IconButton( 24 onPressed: () {}, 25 icon: SvgPicture.asset( 26 "/Users/user/Flutter/furniture_app/furniture_app/assets/icons/notification.svg"), 27 ), 28 ], 29 ); 30 } 31} 32

constants.dart

1import 'package:flutter/material.dart'; 2 3const kBackgroundColor = Color(0xFFF1EFF1); 4const kPrimaryColor = Color(0xFF035AA6); 5const kSecondaryColor = Color(0xFFFFA41B); 6const kTextColor = Color(0xFF000839); 7const kTextLightColor = Color(0xFF747474); 8const kBlueColor = Color(0xFF40BAD5); 9 10const kDefaultPadding = 20.0; 11 12const kDefaultShadow = BoxShadow( 13 offset: Offset(0, 15), 14 blurRadius: 27, 15 color: Colors.black12, 16); 17 18

body.dart

1import 'package:flutter/material.dart'; 2import 'package:flutter_svg/svg.dart'; 3import 'package:furniture_app/constants.dart'; 4import 'package:furniture_app/models/product.dart'; 5import 'package:furniture_app/screens/details/details_screen.dart'; 6import 'package:furniture_app/screens/product/components/product_card.dart'; 7 8import '../../../components/search_box.dart'; 9import 'category_list.dart'; 10 11class Body extends StatelessWidget { 12 @override 13 Widget build(BuildContext context) { 14 return SafeArea( 15 bottom: false, 16 child: Column( 17 children: <Widget>[ 18 SearchBox( 19 onChanged: (value) {}, 20 ), 21 Categorylist(), 22 SizedBox( 23 height: kDefaultPadding / 2, 24 ), 25 Expanded( 26 child: Stack( 27 children: <Widget>[ 28 Container( 29 margin: EdgeInsets.only(top: 70), 30 decoration: BoxDecoration( 31 color: kBackgroundColor, 32 borderRadius: BorderRadius.only( 33 topLeft: Radius.circular(40), 34 topRight: Radius.circular(40), 35 ), 36 ), 37 ), 38 ListView.builder( 39 itemCount: products.length, 40 itemBuilder: (context, index) => ProductCard( 41 itemIndex: index, 42 product: products[index], 43 press: () { 44 Navigator.push( 45 context, 46 MaterialPageRoute( 47 builder: (context) => DetailsScreen( 48 product: products[index], 49 ), 50 ), 51 ); 52 }, 53 ), 54 ), 55 ], 56 ), 57 ), 58 ], 59 ), 60 ); 61 } 62} 63

product_card.dart

1import 'package:flutter/material.dart'; 2import 'package:furniture_app/models/product.dart'; 3 4import '../../../constants.dart'; 5 6class ProductCard extends StatelessWidget { 7 const ProductCard({ 8 Key? key, 9 required this.itemIndex, 10 required this.product, 11 required this.press, 12 }) : super(key: key); 13 14 final int itemIndex; 15 final Product product; 16 final Function press; 17 18 @override 19 Widget build(BuildContext context) { 20 Size size = MediaQuery.of(context).size; 21 return Container( 22 margin: EdgeInsets.symmetric( 23 horizontal: kDefaultPadding, 24 vertical: kDefaultPadding / 2, 25 ), 26 // color: Colors.blueAccent, 27 height: 160, 28 child: InkWell( 29 onTap: () {}, 30 child: Stack( 31 alignment: Alignment.bottomCenter, 32 children: <Widget>[ 33 Container( 34 height: 136, 35 decoration: BoxDecoration( 36 borderRadius: BorderRadius.circular(22), 37 color: itemIndex.isEven ? kBlueColor : kSecondaryColor, 38 boxShadow: [kDefaultShadow], 39 ), 40 child: Container( 41 margin: EdgeInsets.only(right: 10), 42 decoration: BoxDecoration( 43 color: Colors.white, 44 borderRadius: BorderRadius.circular(22), 45 ), 46 ), 47 ), 48 Positioned( 49 top: 0, 50 right: 0, 51 child: Hero( 52 tag: '${product.id}', 53 child: Container( 54 padding: EdgeInsets.symmetric(horizontal: kDefaultPadding), 55 height: 160, 56 width: 200, 57 child: Image.asset( 58 product.image, 59 fit: BoxFit.cover, 60 ), 61 ), 62 ), 63 ), 64 Positioned( 65 bottom: 0, 66 left: 0, 67 child: SizedBox( 68 height: 136, 69 width: size.width - 200, 70 child: Column( 71 crossAxisAlignment: CrossAxisAlignment.start, 72 children: <Widget>[ 73 Spacer(), 74 Padding( 75 padding: const EdgeInsets.symmetric( 76 horizontal: kDefaultPadding), 77 child: Text( 78 product.title, 79 style: Theme.of(context).textTheme.button, 80 ), 81 ), 82 Spacer(), 83 Container( 84 padding: EdgeInsets.symmetric( 85 horizontal: kDefaultPadding * 1.5, 86 vertical: kDefaultPadding / 4, 87 ), 88 decoration: BoxDecoration( 89 color: kSecondaryColor, 90 borderRadius: BorderRadius.only( 91 bottomLeft: Radius.circular(22), 92 topRight: Radius.circular(22), 93 ), 94 ), 95 child: Text( 96 "\$${product.price}", 97 style: Theme.of(context).textTheme.button, 98 ), 99 ), 100 ], 101 ), 102 ), 103 ), 104 ], 105 ), 106 ), 107 ); 108 } 109} 110

product.dart

1 2class Product { 3 final int id, price; 4 final String title, description, image; 5 6 Product( 7 {required this.id, 8 required this.price, 9 required this.title, 10 required this.description, 11 required this.image}); 12} 13 14// list of products 15// for our demo 16List<Product> products = [ 17 Product( 18 id: 1, 19 price: 56, 20 title: "Classic Leather Arm Chair", 21 image: "assets/images/Item_1.png", 22 description: 23 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim", 24 ), 25 Product( 26 id: 4, 27 price: 68, 28 title: "Poppy Plastic Tub Chair", 29 image: "assets/images/Item_2.png", 30 description: 31 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim", 32 ), 33 Product( 34 id: 9, 35 price: 39, 36 title: "Bar Stool Chair", 37 image: "assets/images/Item_3.png", 38 description: 39 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim", 40 ), 41]; 42

試したこと

Youtubeの動画を見ながらFlutterのUI構築の方法を勉強しており、一通り完成はしたものの、メインの商品一覧の商品カードをタップすると詳細画面に遷移するというのが動画内では実現されているもののこちらでは遷移しないという状態です。おそらくですがクラスの呼び出しができていないとかその辺りだとは思うのですが、15分たっても解決できなかったため、質問させていただくことにしました。

補足情報(FW/ツールのバージョンなど)

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1
22A400 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices
(Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

constants.dartはコンスタントに使うpaddingだったりColorをまとめているファイルです。
products_screen.dartが商品一覧画面、body.dartが商品詳細画面のファイルです。
product_card.dartは一商品の情報ファイル、
product.dartはモデルファイルとなっています。
不足している情報などありましたら、質問よろしくお願いします。

学習に使用している動画
https://youtu.be/bkR7naR1efA

お手本のGitHubのURL
https://github.com/abuanwar072/furniture_app_flutter

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ta.fu

2023/01/23 00:49

全ソースが提示されているわけではないので、追試をして動作確認ができないので回答を書くのは難しいのでは。 回答ではなく、解決のための糸口としての情報です。 github側のソースコードと何が違うのかを確認して、差があった場合その差が影響どのように影響しているのかを確認したほうが早いと思う。 怪しいとしたらここには提示されていないProductCardの実装かな。 デバッグ文をpressのNavigator.pushの前に入れて、タップした時本当にこの関数が呼び出されているかを確認するとか。
ituking

2023/01/23 02:47

追記したので確認お願いします。
guest

回答1

0

ベストアンサー

ProductCardがgithub側のコードと以下の部分で違いがあります。

https://github.com/abuanwar072/furniture_app_flutter/blob/e001a52b482b6a432a18dfbe6ce037e1c77bcc44/lib/screens/product/components/product_card.dart#L30

ProductCardに渡されたpressをInkWellのtapに渡してないんで、pressの呼び出しはされません。

なので、タップしてもページ遷移のための処理が呼び出されないです。

投稿2023/01/23 03:03

ta.fu

総合スコア1662

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ituking

2023/01/23 19:53

回答ありがとうございます。確かにonTap: pressとしなければいけないところをonTap () {}となっていたのでエラーとしては出てこないけれど、画面遷移が実現しないという事象でした。しかし今度はThe argument type 'Function' can't be assigned to the parameter type 'void Function()?'.というエラー吐かれてしまったので別で質問させていただきたいと思います。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。