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

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

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

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

Dart

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

Q&A

0回答

595閲覧

The argument type 'Function' can't be assigned to the parameter type 'void Function()?'.

ituking

総合スコア80

Flutter

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

Dart

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

0グッド

0クリップ

投稿2023/01/23 20:20

前提

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

実現したいこと

  • The argument type 'Function' can't be assigned to the parameter type 'void Function()?'.を解消し、画面遷移を実現させる。

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

The argument type 'Function' can't be assigned to the parameter type 'void Function()?'.

該当のソースコード

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: press, 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

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

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

details_screen.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'; 5 6import 'components/body.dart'; 7 8class DetailsScreen extends StatelessWidget { 9 final Product product; 10 11 const DetailsScreen({super.key, required this.product}); 12 @override 13 Widget build(BuildContext context) { 14 return Scaffold( 15 backgroundColor: kPrimaryColor, 16 appBar: buildAppBar(context), 17 body: Body( 18 product: product, 19 ), 20 ); 21 } 22 23 AppBar buildAppBar(BuildContext context) { 24 return AppBar( 25 backgroundColor: kBackgroundColor, 26 elevation: 0, 27 leading: IconButton( 28 padding: EdgeInsets.only(left: kDefaultPadding), 29 icon: SvgPicture.asset( 30 "/Users/ookuboitsuki/Flutter/furniture_app/furniture_app/assets/icons/back.svg"), 31 onPressed: () { 32 Navigator.pop(context); 33 }, 34 ), 35 centerTitle: false, 36 title: Text( 37 "Back".toUpperCase(), 38 style: Theme.of(context).textTheme.bodyText2, 39 ), 40 actions: <Widget>[ 41 IconButton( 42 onPressed: () {}, 43 icon: SvgPicture.asset( 44 "/Users/ookuboitsuki/Flutter/furniture_app/furniture_app/assets/icons/cart_with_item.svg"), 45 ), 46 ], 47 ); 48 } 49}

試したこと

The argument type 'Function' can't be assigned to the parameter type 'void Function()?'.を翻訳したところ、引数型「Function」は、パラメータ型「void Function()?」に割り当てることができません。という意味だと判明。
The argument type 'Function' can't be assigned to the parameter type 'void Function()?'.でググると、
https://github.com/flutter/flutter/issues/111357にヒット。
予想としては、pressの処理がうまく書けていない(例えば、引数が書けているなど)だと思っていますが、Youtubeの動画とお手本のソースコードを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はモデルファイルとなっています。
search_box.dartは検索バー、details_screenは詳細画面のファイルです。
文字数制限に引っかかってしまているので、コメントに後の情報を書きたいと思います。
不足している情報などありましたら、質問よろしくお願いします。

学習に使用している動画
https://youtu.be/bkR7naR1efA
18分35秒あたりからが、onTap: pressの処理についてコードを書いている場所です。

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

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

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

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

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

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

ituking

2023/01/23 20:21

```product.dart class Product { final int id, price; final String title, description, image; Product( {required this.id, required this.price, required this.title, required this.description, required this.image}); } // list of products // for our demo List<Product> products = [ Product( id: 1, price: 56, title: "Classic Leather Arm Chair", image: "assets/images/Item_1.png", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim", ), Product( id: 4, price: 68, title: "Poppy Plastic Tub Chair", image: "assets/images/Item_2.png", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim", ), Product( id: 9, price: 39, title: "Bar Stool Chair", image: "assets/images/Item_3.png", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim", ), ]; ``` ```category_list.dart import 'package:flutter/material.dart'; import '../../../constants.dart'; class Categorylist extends StatefulWidget { @override _CategorylistState createState() => _CategorylistState(); } class _CategorylistState extends State<Categorylist> { int selectedIndex = 0; List categories = ["All", "Sofa", "Park bench", "Armchair"]; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.symmetric(vertical: kDefaultPadding / 2), height: 30, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: categories.length, itemBuilder: (context, index) => GestureDetector( onTap: () { setState(() { selectedIndex = index; }); }, child: Container( alignment: Alignment.center, margin: EdgeInsets.only( left: kDefaultPadding, right: index == categories.length - 1 ? kDefaultPadding : 0), padding: EdgeInsets.symmetric(horizontal: kDefaultPadding), decoration: BoxDecoration( color: index == selectedIndex ? Colors.white.withOpacity(0.4) : Colors.transparent, borderRadius: BorderRadius.circular(6), ), child: Text( categories[index], style: TextStyle(color: Colors.white), ), ), ), ), ); } } ``` ```search_box.dart import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import '../constants.dart'; class SearchBox extends StatelessWidget { const SearchBox({ Key? key, required this.onChanged, }) : super(key: key); final ValueChanged onChanged; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.all(kDefaultPadding), padding: EdgeInsets.symmetric( horizontal: kDefaultPadding, vertical: kDefaultPadding / 4, ), decoration: BoxDecoration( color: Colors.white.withOpacity(0.4), borderRadius: BorderRadius.circular(20), ), child: TextField( onChanged: onChanged, style: TextStyle(color: Colors.white), decoration: InputDecoration( enabledBorder: InputBorder.none, focusedBorder: InputBorder.none, icon: SvgPicture.asset( "/Users/ookuboitsuki/Flutter/furniture_app/furniture_app/assets/icons/search.svg"), hintText: "Search", hintStyle: TextStyle(color: Colors.white), ), ), ); } } ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問