在 Flutter for BottomModalSheet 小部件中找不到脚手架错误，即使它是在脚手架内定义的

Question

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

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) {
    // TODO: implement build
    return Scaffold(
      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 = showBottomSheet(
                        context: context,
                        builder: (context) => BottomSheetWidget());
                    sheetController.closed.then((value) {
                    });
                  },
                  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:200,
                  width: 500,
                  child:Text("This is bottom Sheet")
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

错误日志如下：

Syncing files to device AOSP on IA Emulator...
Reloaded 1 of 478 libraries in 2,727ms.
I/flutter (31983): I Was clicked

════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No Scaffold widget found.

MyHomePage widgets require a Scaffold widget ancestor.
The specific widget that could not find a Scaffold ancestor was: MyHomePage
  state: _MyHomePageState#d2d59
The ancestors of this widget were: 
  : MaterialApp
    state: _MaterialAppState#d6736
  : MyApp
  ...

Typically, the Scaffold widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

When the exception was thrown, this was the stack: 
#0      debugCheckHasScaffold.<anonymous closure> (package:flutter/src/material/debug.dart:112:7)
#1      debugCheckHasScaffold (package:flutter/src/material/debug.dart:123:4)
#2      showBottomSheet (package:flutter/src/material/bottom_sheet.dart:534:10)
#3      _MyHomePageState.build.<anonymous closure> (package:flutter_app/main.dart:42:43)
#4      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14)
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#6c46a
  debugOwner: GestureDetector
  state: possible
  won arena
  finalPosition: Offset(169.5, 356.2)
  finalLocalPosition: Offset(163.8, 124.4)
  button: 1
  sent tap down
════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

如上所述here 使用 Builder 小部件而不是 Keys。 所以这里是代码：

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Hello,World"),
        ),
        body: Builder( // Wrap widget tree with Builder widget
          builder: (context) {
          return Center(
            child: Container(
              height: 300,
              width: 400,
              child: Column(
                children: <Widget>[
                  Container(
                    height: 200,
                    width: 500,
                    child: FlatButton(
                      onPressed: () {
                        print("I Was clicked");
                        var sheetController = showBottomSheet(
                            context: context,
                            builder: (context) => BottomSheetWidget());
                        sheetController.closed.then((value) {});
                      },
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        }));
  }
}```

Answer 2

您可以使用“showModalBottomSheet”。

var sheetController = showModalBottomSheet(
    context: context,
    builder: (context) => BottomSheetWidget());
sheetController.then((value) {});

Answer 3

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

代码sn-p

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")),
              ],
            ),
          )
        ],
      ),
    );
  }
}