How to show error when user gives wrong data in Flutter - flutter

Question

How to show error when user can't login to system because he gives in forms bad login data(email or password)?
I would like this information to appear above email forms.
when i throw bad data in forms my response body return me in console Wrong password or User does not exists, but i want to display this information on screen
my login api:
makeLoginRequest(String email, password) async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
Map data = {
'email':emailController.text,
'password':passwordController.text
};
var jsonResponse;
var url = 'http://10.0.2.2:80/user/login';
var response = await http.post(url, body:data);
if(response.statusCode == 200){
_isLoading = false;
jsonResponse = json.decode(response.body);
sharedPreferences.setInt("id", jsonResponse['id']);
sharedPreferences.setString("firstName", jsonResponse['firstName']);
sharedPreferences.setString("lastName", jsonResponse['lastName']);
setState(() {
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (BuildContext context) => Home()), (Route<dynamic> route) => false);
});
}
else{
print(response.body);
}
}
my UI:
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light
.copyWith(statusBarColor: Colors.transparent));
return Scaffold(
body: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20.0),
child: _headerSection(),
)
],
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
SizedBox(height: 180.0),
_buildEmail(),
SizedBox(height: 30.0),
_buildPassword(),
SizedBox(height: 80.0),
_buttonSection(),
SizedBox(height: 40.0),
_helpText(),
],
)
)
]
)
)
),
);
}
thanks for any help :)

Answer 1

You can use AlertDialog yo show an error message, use the TextEditingController to pass the password if you wish. I've attached a minimalist example that you can run. The correct password would be "111" otherwise there would be an error message displayed through the ```AlertDialog````
Edit: Updated code to include snackbar instead
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final TextEditingController _controller = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Builder(
builder: (BuildContext context){
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
controller: _controller,
),
RaisedButton(
onPressed: () => checkPassword(context, _controller.text),
child: Text("Login",),
),
],
);
},
)
);
}
void checkPassword(BuildContext context, String password) {
if (password != "111") {
final snackBar = SnackBar(content: Text("$password is not correct!"));
Scaffold.of(context).showSnackBar(snackBar);
return;
}
print("Password corect!!");
}
}