How to make listview that navigate to another page when clicked. I am fetching list data from Json api

user_16655616 0
Viewed 32

This is the code of ListView page which displays the cards with data from json api

Widget getData() {
return ListView.builder(
    physics: AlwaysScrollableScrollPhysics(),
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    itemCount: content.length,
    itemBuilder: (context, index) {
      // return Text('index, $index');
      return postCard(content[index]);
    });}


Widget postCard(content) {
var imageURL = content['yoast_head_json']['og_image'][0]['url'];
var title = content['title']['rendered'];
var date = content['date'];
print(title);
return Padding(
  padding: const EdgeInsets.only(bottom: 15.0),
  child: Card(
    color: Colors.white,
    elevation: 0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25),
    ),
    child: InkWell(
      onTap: () {
        Navigator.push(context,
            MaterialPageRoute(builder: (context) => const PostDetails()));
      },

On the Details Page I want to use the variables that get data from the api to make the details page. I want it to have the same variable of the particular index when clicked. Example, the image and post title on the card should be the same as the the title and image not the details page

flutter listview
1 Answers

you can use this: first create a model from your content, for example cardModel, like this:

class CardModel {
  final String imageURL;
  final String title;
  final String date;
  CardModel({@required this.imageURL,@required this.title,@required this.date});

  static List<CardModel> fromJson(List _list) {
List<CardModel> result = [];

for (var item in _list) {
  var address = CardModel(
      imageURL: item['yoast_head_json']['og_image'][0]['url'] as String,
      title: item['title']['rendered'] as String,
      date: item['date'] as String,
      );
  result.add(address);
}
return result;

} }

then create a list of cards so you can pass it to list view, you can full it with dummy data pr api response. like this:

List<CardModel> _list = [
  CardModel(date: 'some thing', imageURL: 'some thing', title: 'some thing'),
];

or json response be like this:

var response = await Dio().get('your url path');

_list = CardModel.fromJson(response.data);

then your list view builder should look like this:

ListView.builder(
    physics: AlwaysScrollableScrollPhysics(),
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    itemCount: content.length,
    itemBuilder: (context, index) {
      
      return postCard(_list[index]);
    });

finally your postCard widget could be this:

Widget postCard(content, CardModel card) {

return Padding(
  padding: const EdgeInsets.only(bottom: 15.0),
  child: Card(
    color: Colors.white,
    elevation: 0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25),
    ),
    child: InkWell(
      onTap: () {
        Navigator.push(context,
            MaterialPageRoute(builder: (context) => const PostDetails(card)));
      },

      ...
    ),

  ),
);
}
user_103069970
Related