Login Validate User through rest api in flutter - authentication

Question

I made the Login with Rest API. My App works like if username and password is correct then go to the MainPage of app. If false then throw exception on a page.The Problem is when credential are true or false. It shows the Circular Progress Indicator on next context or Screen.If the credential true. It show like
enter image description here then enter image description here then MainApp enter image description here
If the Crendential is false then exception page is show else of MainAppScreen.
But I want show the error like under the form like this if the user Crendential are wrong.enter image description here
I am doing validation for two days for not getting my required output.My code file main.dart
import 'package:flutter/material.dart';
import 'package:testing/api.dart';
import 'package:testing/sucess.dart';
main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SignIn(),
);
}
}
class SignIn extends StatefulWidget {
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
//Gettting the JwtToken object and making the instance of it
Future<LoginResponse> _futureJwt;
final TextEditingController _controller = TextEditingController();
//Getting the password from the textField
final TextEditingController _controller1 = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// ),
backgroundColor: Colors.white,
body: Container(
alignment: Alignment.center,
// padding: const EdgeInsets.all(8.0),
//if Field have the null values then Get the value from the textField
child: (_futureJwt == null)
? SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// SizedBox(
// height: MediaQuery.of(context).size.height * 1 / 3,
// child: Image.asset(
// "assets/IMG_2382.png",
// fit: BoxFit.cover,
// ),
// ),
// SizedBox(height: 45.0),
Padding(
padding: const EdgeInsets.only(left: 30,right: 30),
child: TextField(
style: style,
decoration: InputDecoration(
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
controller: _controller,
),
),
SizedBox(height: 25.0),
Padding(
padding: const EdgeInsets.only(left: 30,right: 30),
child: TextField(
controller: _controller1,
obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding:
EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
),
),
SizedBox(
height: 35.0,
),
Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
child: Container(
width: 150,
height: 50,
child: RaisedButton(
child: Text(
"Login",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold),
),
color: Colors.grey[800],
// padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
setState(() {
_futureJwt = createLoginState(
_controller.text, _controller1.text);
});
},
),
),
),
SizedBox(
height: 15.0,
),
],
),
)
//If the Conditiion (_futureJwt == null) is false then
: FutureBuilder<LoginResponse>(
//refer the object to the future
future: _futureJwt,
//
builder: (context, snapshot) {
//if the data is getting
if (snapshot.hasData) {
var token = snapshot.data.token;
print(token);
return Sucess();
}
//if the data results an error
else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
),
),
);
}
}
sucess.dart
import 'package:flutter/material.dart';
class Sucess extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Text('data'),
);
}
}
api.dart
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
Future<LoginResponse> createLoginState(String username, String password) async {
final http.Response response = await http.post(
'http://192.168.43.76//soledesign/wp-json/jwt-auth/v1/token',
headers: <String, String>{
'Accept': 'application/json',
},
body: {
'username': username,
'password': password,
});
if (response.statusCode == 200) {
print(response.body);
return LoginResponse.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to create album.');
}
}
class LoginResponse {
String token;
String userEmail;
String userNicename;
String userDisplayName;
LoginResponse(
{this.token, this.userEmail, this.userNicename, this.userDisplayName});
LoginResponse.fromJson(Map<String, dynamic> json) {
token = json['token'];
userEmail = json['user_email'];
userNicename = json['user_nicename'];
userDisplayName = json['user_display_name'];
}
}

Answer 1

What you need to do is add an alert box which is displayed when the json response has an error message. Like so:
if (json['ErrorMessage] != null){ ShowAlertDialog(); }