找不到脚手架小部件：打开底部对话框工作表时出现异常

Question

我正在使用 Scaffold 小部件，但在打开底部对话框时出现此异常

@override
Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(
    title: Text("Calendar"),
  ),
  body: SafeArea(
  .......
  .......

    child: GestureDetector(
                        onTap: (){
                          //getting exception here
                          showBottomSheet(
                              context: context,
                              builder: (context) => Container(
                                color: Colors.red,
                              ));
                        },

我被困在这段代码上，如果有人可以提出任何建议，这将非常有帮助。 谢谢你。

Answer 1

使用showModalBottomSheet而不是showBottomSheet试试下面的showBottomSheet 。

void _settingModalBottomSheet(BuildContext context){
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc){
      return Container(
        child: new Wrap(
          children: <Widget>[
            new ListTile(
                leading: new Icon(Icons.music_note),
                title: new Text('Music'),
                onTap: () => {}
            ),
            new ListTile(
              leading: new Icon(Icons.videocam),
              title: new Text('Video'),
              onTap: () => {},
            ),
          ],
        ),
      );
    });
}

Answer 2

问题是，在context用来显示BottomSheet不是context中的Scaffold 。 您可以通过使用GlobalKey或将您的GestureDetector包装在Builder小部件中来解决此问题，以便它为您提供包含Scaffold引用的context 。

这是一个使用GlobalKey和Scaffold状态的示例：

// created the ScaffoldState key    
final scaffoldState = GlobalKey<ScaffoldState>();
    
    class MyWidget extends StatelessWidget {
      void _showSheet() {
        // Show BottomSheet here using the Scaffold state instead ot«f the Scaffold context
        scaffoldState.currentState
            .showBottomSheet((context) => Container(color: Colors.red));
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            key: scaffoldState,
            appBar: AppBar(
              title: Text("Calendar"),
            ),
            body: SafeArea(child: GestureDetector(onTap: () {
              //getting exception here
              _showSheet();
            })));
      }
    }

Answer 3

使用 Builder 小部件包装小部件树

 @override
Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(
    title: Text("Calendar"),
  ),
  body: Builder(  //HERE
     builder:(context){
    
     return SafeArea(
     .......
     .......

    child: GestureDetector(
                        onTap: (){
                          //getting exception here
                          showBottomSheet(
                              context: context,
                              builder: (context) => Container(
                                color: Colors.red,
                              ));
                        },

Answer 4

我不是 100% 知道为什么会这样，但我猜测是因为它在脚手架之外。

 class Example extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            
            appBar: AppBar(
              
            ),
            body: SafeArea(child: YourWidget(),
)
);
      }
    }

class YourWidget extends StatelessWidget {
  const YourWidget({
    Key key,
  }) : super(key: key);
   @override
  Widget build(BuildContext context) {
 return GestureDetector(
                        onTap: (){
                          //getting exception here
                          showBottomSheet(
                              context: context,
                              builder: (context) => Container(
                                color: Colors.red,
                              ));
}
   );
  }
}