how to show Api response after login in flutter? - json

Question

I successfully got responses from my API, when a user login with his/her correct or incorrect credentials. how can I display those Api responses in my app whether the user put correct /incorrect name, password?
Here is my API response if he put his correct credentials: if he put the wrong credentials the status code will be 0
Suppose I want to print Status and Message. how can I display that in my app?
Here is my function to call Api:
Future<void> login() async {
var jsonResponse = null;
if (passwordontroller.text.isNotEmpty && emailController.text.isNotEmpty) {
List user;
var response = await http.post(
Uri.parse("http://kokokokokokoklogin"),
body: ({
'LoginId': emailController.text,
'Password': passwordontroller.text
}));
if (response.statusCode == 200) {
print("Correct");
print(response.body);
print(jsonResponse);
Navigator.push(
context, MaterialPageRoute(builder: (context) => Second()));
} else {
print("Wronggooooooooooooooooooooooooooo");
print(response.body);
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Invalid credentials")));
}
} else {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Blank field is not allowed")));
}
}
And here is my textFormField where user will put his/her credentials
TextFormField(
controller:
emailController, //==========================================
decoration: InputDecoration(
labelText: "Email",
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.email)),
),
SizedBox(
height: 10,
),
TextFormField(
controller:
passwordontroller, //=========================================
obscureText: true,
decoration: InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.password)),
),
SizedBox(
height: 45,
),
OutlinedButton.icon(
onPressed: () {
login();
},
SecondPage

Answer 1

Convert your response to JSON and get the parts like this, add error handling (for example if JSON conversion fails):
import 'dart:convert';
And where you get the response:
final jsonResponse = jsonDecode(response.body);
final status = jsonResponse["Status"];
final message = jsonResponse["Message"];
If you want to use this in secondPage, create a named route with arguments and pass it to the route, like explained in the documentation. Or even better, use a FutureBuilder to build the widget that needs the response. This way you can also display a progress indicator while login request is being processed.

Answer 2

Finally Manage to solve it
Here what I did
class AfterLoginResPage extends StatefulWidget {
final ApiResponse rresponse;
const AfterLoginResPage({required this.rresponse});
#override
_AfterLoginResPageState createState() => _AfterLoginResPageState();
}
class _AfterLoginResPageState extends State<AfterLoginResPage> {
var responseRef;
// _SecondState(this.responseRef);
#override
Widget build(BuildContext context) {
var tuhin = Text("Status: ${widget.rresponse.status}");
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Status: ${widget.rresponse.status}"),
Text("Message: ${widget.rresponse.message}"),
Text("Name: ${widget.rresponse.userData!.name}"),
Text("encUserId: ${widget.rresponse.userData!.encUserId}"),
// Text("name: ${widget.UserData.name}"),
SizedBox(
height: 50,
),
OutlinedButton.icon(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Home(),
),
);
},
icon: Icon(
Icons.exit_to_app,
size: 18,
),
label: Text("GoTo Home")),
],
),
),
),
);
}
}