Flutter 如何在颤振中正确显示Snackbar？

我试图在点击

floatingAction按钮时显示一个
Snackbar
。但是当我点击
floatingAction按钮时，它没有显示任何内容。这是我的密码。我正在使用一个
StatefulWidget
。我调试并检查onPressed函数是否也在执行，但不知何故，
Snackbar
不可见。问题的根本原因是什么？我觉得我正在传递的构建上下文有一些问题

class MyApp extends StatefulWidget{
  @override
  MyAppState createState() {
    // TODO: implement createState
    return new MyAppState();
  }

}

class MyAppState extends State<MyApp>{
  File _image;
  String _text;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);
    _image = image;
    final FirebaseVisionImage visionImage = FirebaseVisionImage.fromFile(_image);
    final TextRecognizer textRecognizer = FirebaseVision.instance.textRecognizer();
    final VisionText visionText = await textRecognizer.processImage(visionImage);

    String detectedText = visionText.text;

    setState(() {
      _image = image;
      _text = detectedText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Image Picker Example'),
        ),
        body: new Center(
          child: _image == null
              ? new Text('No image selected.')
              : new Image.file(_image),
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: (){
            showSnackBar(context);
//            getImage();
          },
          tooltip: 'Pick Image',
          child: new Icon(Icons.add_a_photo),
        ),
      ),
    );
  }

  void showSnackBar(BuildContext context) {
    final scaffold = Scaffold.of(context);
    final snackBarContent = SnackBar(
      content: Text("sagar"),
      action: SnackBarAction(
          label: 'UNDO', onPressed: scaffold.hideCurrentSnackBar),
    );
    scaffold.showSnackBar(snackBarContent);
  }

}

类MyApp扩展StatefulWidget{
@凌驾
MyAppState createState（）{
//TODO:实现createState
返回新的MyAppState（）；
}
}
类MyAppState扩展了状态{
文件图像；
字符串-文本；
Future getImage（）异步{
var image=等待ImagePicker.pickImage（源：ImageSource.camera）；
_图像=图像；
最终FirebaseVisionImage visionImage=FirebaseVisionImage.fromFile（_图像）；
final TextRecognizer TextRecognizer=FirebaseVision.instance.TextRecognizer（）；
final VisionText VisionText=等待文本识别器.processImage（visionImage）；
字符串detectedText=visionText.text；
设置状态（）{
_图像=图像；
_文本=检测到的文本；
});
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar：新的appBar(
标题：新文本（“图像选择器示例”），
),
正文：新中心(
子项：_image==null
？新文本（'未选择图像'）
：new Image.file（_Image），
),
floatingActionButton：新的floatingActionButton(
已按下：（）{
showSnackBar（上下文）；
//getImage（）；
},
工具提示：“拾取图像”，
子：新图标（图标。添加照片），
),
),
);
}
void showSnackBar（构建上下文）{
最终脚手架=脚手架（上下文）；
最终SnackBar内容=SnackBar(
内容：文本（“sagar”），
行动：SnackBarAction(
标签：“撤消”，按下时：scaffold.hideCurrentSnackBar），
);
脚手架。展示Snackbar（Snackbar内容物）；
}
}
类MyApp扩展StatefulWidget{
@凌驾
MyAppState createState（）{
//TODO:实现createState
返回新的MyAppState（）；
}
}
类MyAppState扩展了状态{
最终GlobalKey _scaffoldkey=新的GlobalKey（）；
文件图像；
字符串-文本；
Future getImage（）异步{
var image=等待ImagePicker.pickImage（源：ImageSource.camera）；
_图像=图像；
最终FirebaseVisionImage visionImage=FirebaseVisionImage.fromFile（_图像）；
final TextRecognizer TextRecognizer=FirebaseVision.instance.TextRecognizer（）；
final VisionText VisionText=等待文本识别器.processImage（visionImage）；
字符串detectedText=visionText.text；
设置状态（）{
_图像=图像；
_文本=检测到的文本；
});
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
钥匙：_scaffoldkey，
appBar：新的appBar(
标题：新文本（“图像选择器示例”），
),
正文：新中心(
子项：_image==null
？新文本（'未选择图像'）
：new Image.file（_Image），
),
floatingActionButton：新的floatingActionButton(
已按下：（）{
showSnackBar（）；
//getImage（）；
},
工具提示：“拾取图像”，
子：新图标（图标。添加照片），
),
),
);
}
void showSnackBar（）{
最终SnackBar内容=SnackBar(
内容：文本（“sagar”），
行动：SnackBarAction(
标签：“撤消”，按下时：_scaffoldkey.currentState.hideCurrentSnackBar），
);
_scaffoldkey.currentState.showSnackBar（snackBarContent）；
}
}
发生这种情况是因为所使用的
构建上下文没有
Scaffold
祖先，因此无法找到它来呈现
SnackBar
，因为它是由
Scaffold
来显示的

根据文件：

在同一构建函数中实际创建脚手架时
无法使用生成函数的上下文参数查找
脚手架（因为它“在”返回的小部件之上）。这样
在某些情况下，可以使用以下生成器技术来提供
具有BuildContext且在脚手架下的新范围：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Demo')
    ),
    body: Builder(
      // Create an inner BuildContext so that the onPressed methods
      // can refer to the Scaffold with Scaffold.of().
      builder: (BuildContext context) {
        return Center(
          child: RaisedButton(
            child: Text('SHOW A SNACKBAR'),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Hello!'),
              ));
            },
          ),
        );
      },
    ),
  );
}

解决方案

将您的
FloatingActionButton
包装在
Builder
小部件中，将比使用@Epizon答案中已经提到的
GlobalKey
更加优雅。要显示SnackBar，您可以这样使用：

 ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('User Logged In'),
        ));

Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('Rahul Kushwaha!'),
              ));

以前的SnackBar是这样使用的：

 ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('User Logged In'),
        ));

Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('Rahul Kushwaha!'),
              ));

现在，SnackBar由ScaffoldMessenger管理。有关详细信息，请参阅本研究