SnackBar is not showing in flutter

Question

AS I am new to flutter, I can't find why the SnackBar is not showing on my UI while I am calling different function for API call! In one case it is showing but not in other cases. I have to show a Snackbar on success of each API call (like in my project it is on success of generateOtp and on success of verifyOtp).

Below is my code.

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*/ } }

Can anybody please help me to solve this!

Can you try showing the SnackBar also when the status code is not 200? — Andrej
– Andrej, Commented Jan 20, 2021 at 9:57
Where you say if (response.statusCode == 200) {...}, add an else block that calls showInSnackBar('some text', _key); — Andrej
– Andrej, Commented Jan 20, 2021 at 12:18

Son Tran · Accepted Answer · 2021-01-20 09:55:53Z

1

Lack of context, (Context). docs : https://api.flutter.dev/flutter/widgets/BuildContext-class.html

try this(work for me):

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

answered Jan 20, 2021 at 9:55

Son Tran

1221 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miguel Ruivo Over a year ago

That's the default way to show a SnackBar widget on Flutter. If it doesn't work, that's probably because you are using a context that doesn't have a Scaffold ancestor. To prevent this, either use a Builder widget as a home of your Scaffold and then use its context, or assign a GlobalKey<ScaffoldState> to your Scaffold and use the key.currentState.showSnackBar().

abhipsa biswal Over a year ago

@Miguel Ruivo yes, I have assigned GlobalKey<ScaffoldState> as you can see it on register.dart which has mentioned above. Is that the right way what I have done?

Aashutosh Poudel · Accepted Answer · 2021-01-20 10:22:33Z

If You want to use snackbar without context u can use this package get: ^3.13.2 and call snackbar like this any where you want:

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

Collectives™ on Stack Overflow

SnackBar is not showing in flutter

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related