I have an app where homePage display list of post using json after clicking post i need to navigate/show the post comment list according using provider . how to do that?

A screen to list all the posts. https://jsonplaceholder.typicode.com/posts A post detail screen which have list of comments. https://jsonplaceholder.typicode.com/posts/{post_id}/comments

HomePage:

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    // TODO: implement initState
    final provider = Provider.of<GetPostProvider>(context, listen: false);
    provider.getMyData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<GetPostProvider>(context);

    return Scaffold(
        appBar: AppBar(
          title: const Text('User Id'),
        ),
        body: ListView.builder(
            itemCount: provider.postModelClass.length,
            itemBuilder: ((context, index) {
              return Card(child: Consumer<GetPostProvider>(
                builder: (context, value, child) {
                  return ListTile(
                    onTap: () {
                      Navigator.push(context, MaterialPageRoute(builder: (_) {
                        return CommentScreen(
                            postModelClass: value.postModelClass[index]);
                        //here comes error
                      }));
                    },
                    leading: CircleAvatar(
                      child: Text("${value.postModelClass[index].id}"),
                    ),
                    title: Text("${value.postModelClass[index].title}"),
                  );
                },
              ));
            })));
  }
}

CommentPage:

class CommentPage extends StatefulWidget {
  final CommentModel postModelClass;
  const CommentPage({
    Key? key,
    required this.postModelClass,
  }) : super(key: key);

  @override
  State<CommentPage> createState() => _CommentPageState();
}

class _CommentPageState extends State<CommentPage> {
  @override
  Widget build(BuildContext context) {
    final commentprovider = Provider.of<GetCommentProvider>(context);
    return Scaffold(
        appBar: AppBar(),
        body: ListView.builder(
            itemCount: commentprovider.comment.length,
            itemBuilder: ((context, index) {
              return Text(commentprovider.comment[index].email.toString());
            })));
  }
}

PostDetailModel:

class PostModelClass {
  int? userId;
  int? id;
  String? title;
  String? body;
  PostModelClass({
    this.userId,
    this.id,
    this.title,
    this.body,
  });

  Map<String, dynamic> toJson() {
    return {'userId': userId, 'id': id, 'title': title, 'body': body};
  }

  factory PostModelClass.fromJson(Map<String, dynamic> data) {
    final userId = data['userId'];
    final id = data['id'];
    final title = data['title'];
    final body = data['body'];
    return PostModelClass(id: id, userId: userId, title: title, body: body);
  }
}

CommentModel:

class CommentModel {
  int? userId;
  int? id;
  String? name;
  String? email;
  String? body;
  CommentModel({
    this.userId,
    this.id,
    this.name,
    this.email,
    this.body,
  });

  Map<String, dynamic> toJson() {
    return {
      'userId': userId,
      'id': id,
      'name': name,
      'email': email,
      'body': body
    };
  }

  factory CommentModel.fromJson(Map<String, dynamic> data) {
    final userId = data['userId'];
    final id = data['id'];
    final name = data['name'];
    final email = data['email'];
    final body = data['body'];
    return CommentModel(
        userId: userId, id: id, name: name, email: email, body: body);
  }
}

PostProvider:

class GetPostProvider with ChangeNotifier {
  bool isLoading = false;

  List<PostModelClass> postModelClass = [];

  getMyData() async {
    isLoading = true;
    postModelClass = await getAllPost();
    isLoading = false;
    notifyListeners();
  }

  Future<List<PostModelClass>> getAllPost() async {
    final response =
        await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    List<PostModelClass> mylist = [];

    try {
      if (response.statusCode == 200) {
        final jsonDecode = await json.decode(response.body);
        for (var i in jsonDecode) {
          PostModelClass _model = PostModelClass.fromJson(i);
          mylist.add(_model);
        }
        return mylist;
      } else {
        return mylist;
      }
    } catch (e) {
      throw 'aaaaaaaaaa';
    }
  }
}

CommentProvider:

class GetCommentProvider with ChangeNotifier {
  bool isLoading = false;

  List<CommentModel> comment = [];

  late int userId;

  getComment() async {
    isLoading = true;
    comment = await getAllComment(userId);
    isLoading = false;
    notifyListeners();
  }

  Future<List<CommentModel>> fetchComment(int id) async {
    final response = await http.get(
        Uri.parse('https://jsonplaceholder.typicode.com/posts/${id}/comments'));

    try {
      if (response.statusCode == 200) {
        final jsonDecode = json.decode(response.body)['comments'] as List;
        return jsonDecode
            .map((comments) => CommentModel.fromJson(comments))
            .toList();
      } else {
        throw Exception('Failed to load model');
      }
    } catch (e) {
      throw 'error   $e';
    }
  }

  Future<List<CommentModel>> getAllComment(int userId) async {
    final response = await http.get(Uri.parse(
        'https://jsonplaceholder.typicode.com/posts/$userId/comments'));
    List<CommentModel> mylist = [];

    try {
      if (response.statusCode == 200) {
        final jsonDecode = await json.decode(response.body);
        for (var i in jsonDecode) {
          CommentModel _model = CommentModel.fromJson(i);
          mylist.add(_model);
        }
        return mylist;
      } else {
        return mylist;
      }
    } catch (e) {
      throw 'aaaaaaaaaa';
    }
  }
}

CodePudding user response：

I think the value itself is a list of postModelClass so you can use the following command to access it

postModelClass.value[index];

CodePudding user response：

I think you can try it provider.postModelClass[index]