即使在 Scaffold 中定义了 BottomModalSheet 小部件，Flutter 中也未找到 Scaffold 错误

Question

我试图为测试应用程序实现 BottomModalSheet。但每次都会弹出同样的错误，说找不到脚手架。该应用程序的代码如下。该错误表明 Scaffold 是由 MaterialApp Widget 实现的，因此我删除了 MaterialApp Widget 并尝试，但再次弹出相同的错误。

\n\n

import \'package:flutter/material.dart\';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  // This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: \'Flutter Demo\',\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  @override\n  Widget build(BuildContext context) {\n    // TODO: implement build\n    return Scaffold(\n      appBar: AppBar(\n        title: Text("Hello,World"),\n      ),\n      body: Center(\n        child: Container(\n          height: 300,\n          width: 400,\n          child: Column(\n            children: <Widget>[\n              //Container(color: Colors.blue, child: Text("Hello,World")),\n              Container(\n                height:200,\n                width:500,\n                child: FlatButton(\n                  onPressed: (){\n                    print("I Was clicked");\n                    var sheetController = showBottomSheet(\n                        context: context,\n                        builder: (context) => BottomSheetWidget());\n                    sheetController.closed.then((value) {\n                    });\n                  },\n                  child: Container(\n                    color: Colors.red,\n                  ),\n                ),\n              ),\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n}\n\n\nclass BottomSheetWidget extends StatefulWidget {\n  const BottomSheetWidget({Key key}) : super(key: key);\n\n  @override\n  _BottomSheetWidgetState createState() => _BottomSheetWidgetState();\n}\n\nclass _BottomSheetWidgetState extends State<BottomSheetWidget> {\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      margin: const EdgeInsets.only(top: 5, left: 15, right: 15),\n      height: 160,\n      child: Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        mainAxisSize: MainAxisSize.max,\n        children: <Widget>[\n          Container(\n            height: 125,\n            decoration: BoxDecoration(\n                color: Colors.white,\n                borderRadius: BorderRadius.circular(15),\n                boxShadow: [\n                  BoxShadow(\n                      blurRadius: 10, color: Colors.grey[300], spreadRadius: 5)\n                ]),\n            child: Column(\n              children: <Widget>[\n                Container(\n                  height:200,\n                  width: 500,\n                  child:Text("This is bottom Sheet")\n                ),\n              ],\n            ),\n          )\n        ],\n      ),\n    );\n  }\n}\n

\n\n

错误日志如下：

\n\n

Syncing files to device AOSP on IA Emulator...\nReloaded 1 of 478 libraries in 2,727ms.\nI/flutter (31983): I Was clicked\n\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 Exception caught by gesture \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nThe following assertion was thrown while handling a gesture:\nNo Scaffold widget found.\n\nMyHomePage widgets require a Scaffold widget ancestor.\nThe specific widget that could not find a Scaffold ancestor was: MyHomePage\n  state: _MyHomePageState#d2d59\nThe ancestors of this widget were: \n  : MaterialApp\n    state: _MaterialAppState#d6736\n  : MyApp\n  ...\n\nTypically, the Scaffold widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.\n\nWhen the exception was thrown, this was the stack: \n#0      debugCheckHasScaffold.<anonymous closure> (package:flutter/src/material/debug.dart:112:7)\n#1      debugCheckHasScaffold (package:flutter/src/material/debug.dart:123:4)\n#2      showBottomSheet (package:flutter/src/material/bottom_sheet.dart:534:10)\n#3      _MyHomePageState.build.<anonymous closure> (package:flutter_app/main.dart:42:43)\n#4      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14)\n...\nHandler: "onTap"\nRecognizer: TapGestureRecognizer#6c46a\n  debugOwner: GestureDetector\n  state: possible\n  won arena\n  finalPosition: Offset(169.5, 356.2)\n  finalLocalPosition: Offset(163.8, 124.4)\n  button: 1\n  sent tap down\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\n

\n

Answer 1

您可以复制粘贴运行下面的完整代码
您可以使用 varscaffoldKey.currentState.showBottomSheet

代码片段

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

return Scaffold(
  key: scaffoldKey,

 ...

 onPressed: () {
                print("I Was clicked");
                var sheetController = scaffoldKey.currentState
                    .showBottomSheet((context) => BottomSheetWidget());
                sheetController.closed.then((value) {
                  print("closed");
                });
              },

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text("Hello,World"),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 400,
          child: Column(
            children: <Widget>[
              //Container(color: Colors.blue, child: Text("Hello,World")),
              Container(
                height: 200,
                width: 500,
                child: FlatButton(
                  onPressed: () {
                    print("I Was clicked");
                    var sheetController = scaffoldKey.currentState
                        .showBottomSheet((context) => BottomSheetWidget());
                    sheetController.closed.then((value) {
                      print("closed");
                    });
                  },
                  child: Container(
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class BottomSheetWidget extends StatefulWidget {
  const BottomSheetWidget({Key key}) : super(key: key);

  @override
  _BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 5, left: 15, right: 15),
      height: 160,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 125,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                      blurRadius: 10, color: Colors.grey[300], spreadRadius: 5)
                ]),
            child: Column(
              children: <Widget>[
                Container(
                    height: 100,
                    width: 500,
                    child: Text("This is bottom Sheet")),
              ],
            ),
          )
        ],
      ),
    );
  }
}