SnackBar 未在颤动中显示答案

【问题标题】：SnackBar is not showing in flutterSnackBar 未在颤动中显示
【发布时间】：2021-01-20 09:47:20
【问题描述】：

由于我是 Flutter 的新手，当我为 API 调用调用不同的函数时，我无法找到为什么 SnackBar 没有显示在我的 UI 上！在一种情况下它会显示，但在其他情况下则不会。我必须在每个 API 调用成功时显示一个 Snackbar（就像在我的项目中它是在 generateOtp 成功和 verifyOtp 成功时一样）。

下面是我的代码。

snackbar.dart

showInSnackBar(String message, key){
  key.currentState.showSnackBar(
      SnackBar(
        content:Text(message),
        backgroundColor: Colors.blueAccent[700],
      )
  );
}

api_service.dart

class ApiService {
  bool isVerified = false;
  BaseOptions options = BaseOptions(
    baseUrl: "http://...",
  );

  generateOtp(String mobileNo, key) async {
    Dio dio = new Dio(options);
    FormData formData = FormData.fromMap({'mobile_no': mobileNo});
    try {
      Response response = await dio.post("generate_otp/", data: formData);
      if (response.statusCode == 200) {
       // on success of generate otp I have to show a message on SnackBar. But it is not working.
        showInSnackBar(response.data["msg"], key);
        print(response.data);
      }
    } on DioError catch (e) {
      showInSnackBar(e.message, key);
    }
  }

  Future<bool> verifyOtp(String mobileNo, String otp, key) async {
    Dio dio = new Dio(options);
    FormData formData = FormData.fromMap(
    //.....);
    try {
      Response response = await dio.post("verify_otp/", data: formData);
      if (response.statusCode == 200) {
       // here also it is not working.
        showInSnackBar(response.data["msg"], key);  
        // Otp verified
        isVerified = true;
      }
    } on DioError catch (e) {
      showInSnackBar(e.message, key);
    }
    return isVerified;
  }
}

register.dart

class _RegisterPageState extends State<RegisterPage> {
  var _key = new GlobalKey<ScaffoldState>();
  //...........
      service.generateOtp(_data.mobileNo, _key); /* here I am calling generateOtp() */
    } else {
      print('invalid credentials');
    }
  }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _key,
        body: SingleChildScrollView(
         //..........

otp.dart

submit() async {
    _formKey.currentState.save();
    bool verify =
        await service.verifyOtp(widget.mobNumber, pinController.text, _key); /* here I am calling 
                                                                                  verifyOtp() */
    if (verify) {
      SharedPreferences preferences = await SharedPreferences.getInstance();
      String userInfo = preferences.getString('user_data');
     // Decoding String data to map
      Map map = json.decode(userInfo);
      service.registerUser(map);
    } else {
      showInSnackBar('Invalid otp', _key); /* here SnackBar is showing on my UI*/
    }
  }

谁能帮我解决这个问题！

【问题讨论】：

当状态码不是 200 时，你能尝试显示 SnackBar 吗？
@Andrej，你能建议我怎么做吗？
在你说if (response.statusCode == 200) {...}的地方，添加一个调用showInSnackBar('some text', _key);的else块
@Andrej，是的。但如果成功了，我将如何证明这一点？
成功了吗？ SnackBar 显示了吗？

标签： flutter dart

【解决方案1】：

缺乏上下文，（上下文）。文档：https://api.flutter.dev/flutter/widgets/BuildContext-class.html

试试这个（为我工作）：

void _showSnackBar(BuildContext context, String text) {
    Scaffold.of(context).showSnackBar(SnackBar(content: Text(text)));
  }

【讨论】：

这是在 Flutter 上显示 SnackBar 小部件的默认方式。如果它不起作用，那可能是因为您使用的 context 没有 Scaffold 祖先。为防止这种情况发生，请使用Builder 小部件作为Scaffold 的主页，然后使用其context，或将GlobalKey<ScaffoldState> 分配给Scaffold 并使用key.currentState.showSnackBar()。
@Miguel Ruivo 是的，我已经分配了 GlobalKey，你可以在上面提到的 register.dart 上看到它。这是我所做的正确方式吗？

【解决方案2】：

如果你想在没有上下文的情况下使用snackbar，你可以使用这个包获取：^3.13.2 并在任何你想要的地方调用这样的小吃吧：

 Get.snackbar(
            "title",
            "content",
          );

【讨论】：