Showing a snackbar in Flutter - flutter

Question

i am working on signin part of my project and i had a form with email and password and a sign in button and everything is working it is connecting to the firebase. It's sending me the result either success or an error. What i want to ask is that i would like to show the error in snack bar and i have been trying all day but it doesnt work. Can any one please help!! the error message am getting is below,
FlutterError (Looking up a deactivated widget's ancestor is unsafe.
At this point the state of the widget's element tree is no longer stable.
To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling inheritFromWidgetOfExactType() in the widget's didChangeDependencies() method.)
and here's the code
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:inclass/screens/authentication/signup.dart';
import 'package:inclass/screens/home/dashboard.dart';
import 'package:inclass/services/auth.dart';
import 'package:inclass/shared/loading.dart';
import 'package:inclass/widgets/logo.dart';
class Signin extends StatefulWidget {
#override
_SigninState createState() => _SigninState();
}
class _SigninState extends State<Signin> {
bool _obscureText = true;
final AuthService _auth = AuthService();
final _formkey = GlobalKey<FormState>();
bool loading = false;
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
String email = '';
String password = '';
String error = '';
#override
Widget build(BuildContext context) {
return loading
? Loading()
: Scaffold(
key: _scaffoldKey,
backgroundColor: Colors.white,
body: Builder(
builder: (context) => ListView(children: <Widget>[
Form(
key: _formkey,
child: Column(
children: <Widget>[
Logo(),
SizedBox(
height: 20.0,
),
Stack(children: <Widget>[
Image(
height: 200.0,
width: MediaQuery.of(context).size.width,
image: AssetImage("assets/images/move.png"),
fit: BoxFit.cover,
),
Positioned(
bottom: 20.0,
right: 60.0,
child: Text(
'Sign In',
style: TextStyle(
color: Color(0xff7E8E9D),
fontSize: 22.0,
fontFamily: 'Poppins'),
textAlign: TextAlign.center,
)),
Positioned(
bottom: 5.0,
right: 80.0,
child: Text(
"As",
style: TextStyle(
color: Color(0xff7E8E9D),
fontSize: 15.0,
fontFamily: 'Poppins'),
textAlign: TextAlign.center,
),
)
]),
Padding(
padding: const EdgeInsets.only(
top: 20.0, left: 15.0, right: 15.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 3,
height: 80.0,
decoration: new BoxDecoration(
//border: new Border.all(width: 1.0, color: Colors.black),
//shape: BoxShape.circle,
color: Colors.white,
boxShadow: <BoxShadow>[
// BoxShadow(
// color: Colors.grey,
// offset: Offset(1.0, 15.0),
// blurRadius: 64.0,
// ),
],
),
// color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.graduationCap,
color: Color(0xffB57E20),
size: 22.0,
),
Padding(
padding:
const EdgeInsets.only(left: 15.0),
child: Text(
"Student",
style: TextStyle(
color: Color(0xffB57E20),
fontSize: 17.0,
fontFamily: 'Poppins'),
),
)
],
),
),
Container(
width: 1.0,
height: 60.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.black54),
),
),
),
Container(
width: MediaQuery.of(context).size.width / 3,
height: 80.0,
decoration: new BoxDecoration(
//border: new Border.all(width: 1.0, color: Colors.black),
//shape: BoxShape.circle,
color: Colors.white,
boxShadow: <BoxShadow>[
// BoxShadow(
// color: Colors.grey,
// offset: Offset(1.0, 15.0),
// blurRadius: 64.0,
// ),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.chalkboardTeacher,
color: Color(0xff00315C),
size: 22.0,
),
Padding(
padding:
const EdgeInsets.only(left: 15.0),
child: Text(
"Teacher",
style: TextStyle(
color: Color(0xff00315C),
fontSize: 17.0,
fontFamily: 'Poppins'),
),
)
],
),
)
],
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 40.0),
child: TextFormField(
onChanged: (val) {
setState(() => email = val);
},
validator: (val) =>
val.isEmpty ? "Email can't be Empty" : null,
// textAlign: TextAlign.center,
keyboardType: TextInputType.emailAddress,
// autofocus: true,
decoration: InputDecoration(
labelText: "Email",
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide:
BorderSide(color: Color(0xff00315C))),
suffixIcon: Icon(Icons.mail)),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 15.0, left: 20.0, right: 20.0, bottom: 20.0),
child: TextFormField(
obscureText: _obscureText,
onChanged: (val) {
setState(() => password = val);
},
validator: (val) => val.length < 6
? "Password Must be 6+ Char"
: null,
// textAlign: TextAlign.center,
// autofocus: true,
decoration: InputDecoration(
labelText: "Password",
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide:
BorderSide(color: Color(0xff00315C))),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Icon(
_obscureText
? Icons.visibility
: Icons.visibility_off,
semanticLabel: _obscureText
? 'show password'
: 'hide password',
),
)),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: FlatButton(
child: Text("Forgot Password?",
style: TextStyle(color: Colors.grey)),
onPressed: () {},
),
),
Padding(
padding: const EdgeInsets.only(right: 25.0),
child: OutlineButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
highlightedBorderColor: Color(0xffB57E20),
borderSide: BorderSide(color: Color(0xffB57E20)),
onPressed: () async {
if (_formkey.currentState.validate()) {
setState(() => loading = true);
dynamic result =
await _auth.signInWithEmailAndPassword(
email, password);
if (result == null) {
setState(() {
error = 'Could not sign in';
loading = false;
});
_showToast(context,error);
print(error);
} else {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (_) => DashBoard()));
print("Succeed");
}
}
},
padding: EdgeInsets.only(
left: 30.0,
right: 15.0,
top: 12.0,
bottom: 12.0),
color: Colors.white,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Next",
style: TextStyle(
color: Color(0xffB57E20),
fontSize: 17.0,
fontFamily: 'Poppins'),
),
Padding(
padding: const EdgeInsets.only(
left: 10.0, top: 2.0),
child: Icon(Icons.navigate_next,
color: Color(0xffB57E20), size: 30.0),
)
],
),
),
)
],
),
Padding(
padding: const EdgeInsets.all(28.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Not Registered Yet?",
style: TextStyle(
color: Colors.grey,
fontSize: 15.0,
fontFamily: 'Poppins')),
SizedBox(
width: 10.0,
),
GestureDetector(
onTap: () => Navigator.push(context,
MaterialPageRoute(builder: (_) => SignUp())),
child: Text("Sign Up",
style: TextStyle(
color: Color(0xff00315C),
fontSize: 15.0,
fontFamily: 'Poppins')),
),
],
),
)
],
),
),
]),
),
);
}
void _showToast(BuildContext context,String error) {
final scaffold = Scaffold.of(context);
scaffold.showSnackBar(SnackBar(
content: Text(error),
duration: Duration(seconds: 2),
action: SnackBarAction(
onPressed: () {
scaffold.hideCurrentSnackBar();
},
label: 'Okay',
),
));
}
}
My code is a little bit messy i didn't refactor it yet

Answer 1

It is related to this part of your code
return
loading
? Loading()
: Scaffold(
when you tap on Next button, you put code like this for loading
setState(() => loading = true);
and it removes Scaffold from Widget tree. and when you are trying to use _showToast function, though you called setState loading = false again, the Scaffold is not ready and moved into Widget tree, so Scaffold.of cannot make proper result you want.
So I offer you if you want to show loading screen, you should use Dialog or IndexedStack.
Hope this can solve your problem.