How do I make my FutureBuilder refresh to keep displaying new things on my infinite ViewList?

Question

I'm trying to build an app that displays pictures indefinitely as you scroll, with images fetched from the Flickr API. As it stands, it scrolls down as it should (even though it stutters like hell when scrolling back up), but it loops through the same 100 pictures indefinitely.

How do I make it so the API requests a new batch of pictures once the first 100 have been sent out ?

Also, can someone tell me how to make the API send only SFW images ? The amount of quasi-porn I'm getting with this is a little mad.

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<Photo>> fetchPhoto() async {
  final response = await http.get(Uri.parse(
      'https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=d92076c10463fe13f610511210b3dee9&user_id=&tags=tattoo&privacy_filter=1&safe_search=3&content_type=1&format=json&nojsoncallback=1'));

  if (response.statusCode == 200) {
    return jsonDecode(response.body)['photos']['photo']
        .map<Photo>((element) => Photo.fromJson(element))
        .toList();
  } else {
    throw Exception('Failed to load photo');
  }
}

class Photo {
  final String server;
  final String id;
  final String title;
  final String secret;

  const Photo({
    required this.server,
    required this.id,
    required this.title,
    required this.secret,
  });

  factory Photo.fromJson(Map<String, dynamic> json) {
    json;
    return Photo(
        server: json.values.toList()[3],
        id: json.values.toList()[0],
        title: json.values.toList()[5],
        secret: json.values.toList()[2]);
  }
}

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

  @override
  _HomescreenState createState() => _HomescreenState();
}

class _HomescreenState extends State<Homescreen> {
  late Future<List<Photo>> futurePhoto = fetchPhoto();
  late int x = -1;

  @override
  void initState() {
    futurePhoto = fetchPhoto();
    x = -1;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ListView.builder(
            itemBuilder: (context, i) {
              return Container(
                  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
                  child: FutureBuilder<List<Photo>>(
                    future: futurePhoto,
                    builder: (context, snapshot) {
                      x++;
                      if (x == 100) {
                        x = 0;
                      }
                      if (snapshot.hasData) {
                        return Column(children: [
                        Column(children: [
                          Text(snapshot.data![x].title),
                          Image.network(
                              'https://live.staticflickr.com/' +
                                  snapshot.data![x].server +
                                  '/' +
                                  snapshot.data![x].id +
                                  '_' +
                                  snapshot.data![x].secret +
                                  '.jpg',
                              width: 500),
                        ]),
                        const SizedBox(height: 30),
                      ]);
                      }
                      return const CircularProgressIndicator();
                    },
                  ));
            }));
  }
}

Answer 1

For your infinite scrolling I highly recommend that you use this package: https://pub.dev/packages/infinite_scroll_pagination

It achieves exactly what you want and it allows you to paginate too.

Regarding the SFW question, the only thing you can rely on is the safe_search argument you can pass to the API according to this documentation: https://www.flickr.com/services/api/flickr.photos.search.html