How can I fetch and use data with this design in flutter-CodePudding

I have this design, I created it and put the data manually, the question is how can I get the data in the image and it is from this website (https://jsonplaceholder.typicode.com/posts) and display it in the same design

CodePudding user response：

  var url = Uri.parse("https://jsonplaceholder.typicode.com/posts");

      var response = await http.get(url);

      if (response.statusCode == 200) {
        var responseJson = jsonDecode(response.body);
        responseJson as List;
        return responseJson.map((e) => YourModel.fromJson(e)).toList();
      }

CodePudding user response：

Firstly, you can paste your JSON in the link below, click convert and get your Dart classes for free.

Secondly, you can copy the result which is named JsonPlaceHolderResponse and create a new file in your project, and paste the result there.

Finally, you can use this code to get your data from defined API:

import 'package:http/http.dart';

Future<JsonPlaceHolderResponse?> getData(String url) async {
    
      final _response = await Client().get(
        url
      );
      if (_response.successResponse) {
        final _json = jsonDecode(_response.body);
        return JsonPlaceHolderResponse.fromJson(_json);
      } else {
        return null;
      }
    
    return null;
  }


extension ResponseExtension on Response {
  bool get hasWrongCredentials => statusCode == 422;

  bool get tooManyRequests => statusCode == 429;

  bool get successResponse => statusCode >= 200 && statusCode < 300;
}