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

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

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

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

解決済

【Flutter】ListViewを押下してBottomSheetを表示させたい

trainee_of_A
trainee_of_A

総合スコア4

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

1回答

0グッド

0クリップ

213閲覧

投稿2022/11/22 03:45

前提

Flutterで、通知一覧となるページを実装しています。
通知のタイトルを押下したら、BottomSheetで詳細内容を表示できるような仕様にしたいです。

実現したいこと

・通知のタイトルをListViewで表示させ、IconButtonでBottomSheetを表示させたい。

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

IconButton内に記載したBottomSheetが表示されない。

該当のソースコード

Dart

1import 'package:flutter/material.dart'; 2 3void main() { 4 runApp(const MyApp()); 5} 6 7class MyApp extends StatelessWidget { 8 const MyApp({Key? key}) :super(key: key); 9 10 11 Widget build(BuildContext context) { 12 return MaterialApp( 13 title: '通知', 14 theme: ThemeData( 15 primarySwatch: Colors.orange, 16 ), 17 home: InfoListPage(), 18 ); 19 } 20} 21class InfoListPage extends StatefulWidget { 22 const InfoListPage({Key? key}) : super(key: key); 23 24 25 State<InfoListPage> createState() => _InfoListPageState(); 26} 27 28class _InfoListPageState extends State<InfoListPage> { 29 30 31 Widget build(BuildContext context){ 32 return Scaffold( 33 body: ListView( 34 children: <Widget>[ 35 Card( 36 child: ListTile( 37 leading: Text("${DateTime.now().month}/${DateTime.now().day}"), 38 title: Text('通知タイトルを表示'), 39 trailing: IconButton( 40 onPressed: (){ 41 showBottomSheet( 42 context: context, 43 builder: (BuildContext context){ 44 return Container( 45 child: Text('ここに詳細内容を表示'), 46 alignment: Alignment.center, 47 height: 500, 48 width: double.infinity, 49 decoration: BoxDecoration( 50 color: Colors.white, 51 boxShadow: [ 52 BoxShadow( 53 color: Colors.grey, 54 blurRadius: 20, 55 ), 56 ]), 57 ); 58 }); 59 }, 60 icon: Icon(Icons.account_balance_wallet_outlined), 61 ), 62 ), 63 ), 64 ], 65 ), 66 ); 67 } 68} 69

試したこと

・IconButtonを使わずに、ListTileのonTapで直接呼び出す。
→BottomSheetの反映なし。
https://stackoverflow.com/questions/49778866/close-modal-bottom-sheet-programmatically-in-flutter
の回答を基にNavigatorでの記述を試す
→BottomSheetの反映なし。

ListTileの中でBottomSheetを表示させるのは難しいのでしょうか。
何か解決策をご存じであればご教示いただけますと幸いです。
よろしくお願いいたします。

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

Android Studio Dolphin | 2021.3.1

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

以下の様にListTileをBuilderでラッピングしてみてください。(IconButtonの方でもいいです)

dart

1 child: Builder(builder: (context) { 2 return ListTile(

Flutterよくあるエラーパターンです。

提示されたコードを実行しエラーメッセージを見ると、「No Scaffold widget found.」と出ています。
showBottomSheetはScaffoldウィジェットに対して発する命令なのですが、そのScaffoldが見つからないという状態です。

showBottomSheet単独では内部でScaffold.of(context)でScaffoldウィジェットを引っ張ってきます。

上でScaffoldを作っていてcontextがあるのだから、Scaffoldウィジェットを取ってこれるのでは?と思うのですが、コード上で渡しているcontextは_InfoListPageState上でのcontextなので、その下位で作られているScaffoldウィジェットの情報は含まれていないcontextです。そのためエラーが出ます。

このような場合、showBottomSheetの呼び出しを含むウィジェットを、Builderや別ウィジェットクラス化でラッピングすることでScaffoldを含むcontextを渡すことができるようになります。

投稿2022/11/22 05:47

ta.fu

総合スコア1263

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

trainee_of_A

2022/11/22 08:18

ta.fu様、ご回答ありがとうございます。 おかげさまでBottomSheetを表示させることが出来ました! まさにta.fu様のおっしゃる通りで、どうしてScaffoldが見つからないんだろうと疑問でした。 大変勉強になります。ご丁寧な回答、解説をありがとうございました!

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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