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

Question

前提

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

実現したいこと

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

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

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

該当のソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '通知',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: InfoListPage(),
    );
  }
}
class InfoListPage extends StatefulWidget {
  const InfoListPage({Key? key}) : super(key: key);

  @override
  State<InfoListPage> createState() => _InfoListPageState();
}

class _InfoListPageState extends State<InfoListPage> {

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Card(
            child: ListTile(
              leading: Text("${DateTime.now().month}/${DateTime.now().day}"),
              title: Text('通知タイトルを表示'),
              trailing: IconButton(
                onPressed: (){
                  showBottomSheet(
                      context: context,
                      builder: (BuildContext context){
                        return Container(
                          child: Text('ここに詳細内容を表示'),
                          alignment: Alignment.center,
                          height: 500,
                          width: double.infinity,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey,
                                  blurRadius: 20,
                                ),
                              ]),
                        );
                      });
                },
                icon: Icon(Icons.account_balance_wallet_outlined),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

試したこと

・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

Answer 1

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

            child: Builder(builder: (context) {
              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を渡すことができるようになります。

Comments

[trainee_of_A]

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