Hi need help to show my API data into text.. I already get the response but I don't know how to turn it into text which it will show at the screen.. now the data are shows at the terminal. This is my codes

class carList extends StatefulWidget {
  const carList({Key? key}) : super(key: key);

  @override
  State<carList> createState() => _carListState();
}

class _carListState extends State<carList> {

  var userController = TextEditingController();
  var apiController = TextEditingController();
  final pref = Pref();

  @override
  void initState() {
    MySharedPreferences().getUserId().then((value) {
      setState(() {
        userController.text = value.toString();
      });
    });
    MySharedPreferences().getUserToken().then((value) {
      setState(() {
        apiController.text = value.toString();
      });
    });
    //TODO: IMPLEMENT INITSTATE
  }

this is where I want to show my API data

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(10),
                child: TextField(
                  controller: userController,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.email),
                    labelText: 'User ID',
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.all(10),
                child: TextField(
                  controller: apiController,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.email),
                    labelText: 'Token',
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(25),
                child: TextButton(
                  child: Text('Show Car List',
                    style: TextStyle(fontSize: 20.0,
                        color: Colors.blueAccent,
                        backgroundColor: Colors.white),
                  ),
                  onPressed: () {
                    list();
                  },
                ),
              )
            ]
        )
    );
  }

this is my API response

void list() async {
    {
      var response = await http.post(
          Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
          body: ({
            'user_id': userController.text,
            'token': apiController.text,
            'device': "Android",
          }));
      if (response.statusCode == 200) {
        final body = jsonDecode(response.body);
        print(apiController.text);
        // final SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
        // sharedPreferences.setString('email', emailController.text);
        print(body.toString());
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text("Successfully Login")));
      }
    }
  }
}

This page that I want to show my data.

CodePudding user response：

Please provide the Logged response but if its an object json response i.e

{
"userId":1,
"userName":"hello world"
}

then to get data :

print(body['userId']);

CodePudding user response：

I do not know what you get from response but you can show the data like this. Suppose you get "email" from the response. then you can write

String email = '';
void list() async {
{
  var response = await http.post(
      Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
      body: ({
        'user_id': userController.text,
        'token': apiController.text,
        'device': "Android",
      }));
  if (response.statusCode == 200) {
    final body = jsonDecode(response.body);
    setState(() {
    email = body['email'];
    });
    print(apiController.text);
    print(body.toString());
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text("Successfully Login")));
  }
}

} }