Flutter: Parsing JSON data and showing in App

Question

I am very new to Flutter and Dart.

I have a signup page and I would like to show error in the App. My backend page is returning the errors and status in JSON format. Like below.

{"errors":{"Password1":"Password could not be empty",
"Email1":"Invalid Email Format",
"Name":"Your name must be between 3 to 30 characters!"},
"success":false}

I created a file for JSON parsing like below.

import 'dart:convert';

Signup signupFromJson(String str) => Signup.fromJson(json.decode(str));

String signupToJson(Signup data) => json.encode(data.toJson());

class Signup {
    Errors errors;
    bool success;

    Signup({
        this.errors,
        this.success,
    });

    factory Signup.fromJson(Map<String, dynamic> json) => Signup(
        errors: Errors.fromJson(json["errors"]),
        success: json["success"],
    );

    Map<String, dynamic> toJson() => {
        "errors": errors.toJson(),
        "success": success,
    };
}

class Errors {
    String password1;
    String email1;
    String name;

    Errors({
        this.password1,
        this.email1,
        this.name,
    });

    factory Errors.fromJson(Map<String, dynamic> json) => Errors(
        password1: json["Password1"],
        email1: json["Email1"],
        name: json["Name"],
    );

    Map<String, dynamic> toJson() => {
        "Password1": password1,
        "Email1": email1,
        "Name": name,
    };
}

Now I need to show this data to App after Async call.

Future userRegistration() async{
    try{
  // Showing CircularProgressIndicator.
  setState(() {
  visible = true ; 
  });


  // Getting value from Controller
  String name = nameController.text;
  String email = emailController.text;
  String password = passwordController.text;

  // SERVER API URL
  var url = 'http://192.168.100.10:8080/app/registerexec.php';

  // Store all data with Param Name.
  var data = {'name': name, 'email': email, 'password' : password};

  // Starting Web API Call.
  var response = await http.post(url, body: json.encode(data));

  // Getting Server response into a variable.

  final message = signupFromJson(response.body);

  if(response.statusCode == 200){
  setState(() {
    visible = false; 
  });

}
  // Showing Alert with Response JSON Message.

 }catch(e){
   return userRegistration();
 }
}

How can I show the JSON data to SnackBar?

Edit

I managed to get the data in Print after manually defining it. Like below. But I want to automate it. So, if there are any errors it can show and if its successful then a different message.

print(message.errors.email1);
  print(message.errors.name);
  print(message.errors.password1);
  print(message.success);

I have already posted an answer which kind of fits here (if you looking forward for how to deal with json) stackoverflow.com/a/58708634/9236994 — Vicky Salunkhe
– Vicky Salunkhe, Commented Apr 26, 2020 at 9:51

xion · Accepted Answer · 2020-04-26 08:38:19Z

1

you could use FutureBuilder at your snackBar. I've edited from the code available here:

class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: userRegistration,
      initialData: '',
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          // snapshot.data = yourData from your userRegistration
          // print(snapshot.data) to show your data here
          return snackBar = SnackBar(
            content: Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {

              },
            )
        };
          )
      },
    ),
  }
}

answered Apr 26, 2020 at 8:38

xion

1,36912 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roxx Over a year ago

Thanks for the answer. let me try.

Collectives™ on Stack Overflow

Flutter: Parsing JSON data and showing in App

Edit

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related