Login Validate User through rest api in flutter

Viewed 8815

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'];
  }
}

1 Answers

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(); }

Related