How to add data into a future list

Question

i got a list of data from an api and want to add some data to that list but i cant find the word add when i write (futureList.) is the future list cant be added to ?

my program should do a loading when the user reaches the end of the gridview so i should put the next data that be shown to the main list so that it can be loaded but i cant do that.

i want to load the nxt page data from the api to my main list in the method getNextPageData.

another thing that making me get tilted this error Error Picture i know why it happends , it happends when i first start the app , the data didnt come yet so the apps says there is no data to get its length, but when i go to another tab and get back again the data appears normally, i just cant figure how to handle this error , anyhelp plz ?

this is my code

int pageNumber = 1;
String filterName = '';

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

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

class _ShowsListDesignState extends State<ShowsListDesign> {
  ScrollController controller = ScrollController();
  ServicesClass service = ServicesClass();
  ModelClass modelClass = ModelClass();
  late Future filmsFutureList;

  @override
  void initState() {
    super.initState();
    filmsFutureList = getFilmsList();
    controller.addListener(listenScrolling);
  }

  getFilmsList() async {
    return await service.getFilms('posts/$pageNumber/$filterName');
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: filmsFutureList,
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            return const Text('There is no Connection');
          case ConnectionState.active:
          case ConnectionState.waiting:
            return const Center(
              child: CircularProgressIndicator(),
            );
          case ConnectionState.done:
            return Stack(
              alignment: Alignment.bottomCenter,
              children: [
                GridView.builder(
                  itemCount: snapshot.data.length,
                  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 250,
                    crossAxisSpacing: 24,
                    mainAxisSpacing: 24,
                    childAspectRatio: (3 / 5),
                  ),
                  controller: controller,
                  itemBuilder: (context, index) {
                    modelClass = ModelClass.fromJson(snapshot.data[index]);
                    return FilmsCard(
                      image: modelClass.thumbUrl,
                      title: modelClass.title,
                      year: modelClass.year,
                    );
                  },
                ),
                FloatingActionButton(
                  onPressed: () {
                    scrollUp();
                  },
                  elevation: 24,
                  backgroundColor: PRIMARY,
                  child: const Text(
                    'Scroll Up',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 12,
                    ),
                  ),
                ),
              ],
            );
          default:
            return const Text('Error');
        }
      },
    );
  }

  void scrollUp() {
    const double start = 0;
    controller.animateTo(start,
        duration: const Duration(seconds: 1, milliseconds: 50),
        curve: Curves.easeIn);
  }

  void listenScrolling() {
    if (controller.position.atEdge) {
      final isTop = controller.position.pixels == 0;
      if (isTop) {
      } else {
        getNxtPageData();
      }
    }
  }

  void getNxtPageData() {
    pageNumber++;

  }
}

Answer 1

There are two ways to add something in a Future. The first way is to use then. then will be called after your future completes. Important to mention is, that this way you keep it of type Future<List>.

final Future<List> filmsFutureList = getFilmsList().then((value) => value..add(newFilm));

Another way is if you use await. Here you wait for your future to complete and then add a new value to the list.

final List filmsList = await filmsFuture;
filmsList.add(newFilm);