Home > Enterprise >  PageView.builder move to the next page if based on a value from future (api)
PageView.builder move to the next page if based on a value from future (api)

Time:01-17

I have a FutureBuilder and inside is a PageView.builder. The future is calling an api and a list of flags is being fetched from the server. The flags are based on '0' & '1' like this ['1','1','0','0']. What I want to do is to skip the pages from start that have flag '1'. In this case, page first should be the first '0' at index 2. However, all pages should be built in case user want to see the previous pages as well.

Here is my code:

import 'package:flutter/material.dart';

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

  @override
  State<ScreenForBuilder> createState() => _ScreenForBuilderState();
}

class _ScreenForBuilderState extends State<ScreenForBuilder> {

  List isCompleted = [];

  apiCallFunction() async {
     isCompleted = ['1','1','0','0'];
    return isCompleted;
  }


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: FutureBuilder(
            future: apiCallFunction(),
            builder: (context, snapshot){
              return PageView.builder(
                itemCount: 4,
                  itemBuilder: (context, index){
                  return Center(
                    child: Text('${index 1}', style: const TextStyle(fontSize: 50),),
                  );
                  }
              );
            }
        ),
      ),
    );
  }
}

CodePudding user response:

The code @Hydra provided didn't work for me but I got the idea. I set the initial page with indexOf a flag. Here's my code that worked.

import 'package:flutter/material.dart';

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

  @override
  State<ScreenForBuilder> createState() => _ScreenForBuilderState();
}

class _ScreenForBuilderState extends State<ScreenForBuilder> {

  List isCompleted = [];

  apiCallFunction() async {
    isCompleted = ['1','1','0','0'];
    return isCompleted;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: FutureBuilder(
            future: apiCallFunction(),
            builder: (context, snapshot){
              if(snapshot.hasData) {
                return PageView.builder(
                    controller: PageController(initialPage: isCompleted.indexOf('0')),
                    itemCount: isCompleted.length,
                    itemBuilder: (context, index){
                      return Center(
                        child: Text('${index}', style: const TextStyle(fontSize: 50),),
                      );
                    }
                );
              } else
                return CircularProgressIndicator();
            }
        ),
      ),
    );
  }
}

CodePudding user response:

you can set the initialPage in the PageController

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

  @override
  State<ScreenForBuilder> createState() => _ScreenForBuilderState();
}

class _ScreenForBuilderState extends State<ScreenForBuilder> {
  List isCompleted = [];

  Future<List<String>> apiCallFunction() async {
    List<String> isCompleted = ['1','1','0','0'];
    return isCompleted;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: FutureBuilder<List<String>>(
          future: apiCallFunction(),
          builder: (context, snapshot) {
            if (snapshot.connectionState != ConnectionState.done) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }

            if (snapshot.hasError || !snapshot.hasData) {
              return const Center(
                child: Text('something went wrong'),
              );
            }

            final initialPage = snapshot.data!.indexWhere(
              (element) => element == '0',
            );

            return PageView.builder(
              controller: PageController(
                initialPage: initialPage == -1 ? 0 : initialPage,
              ),
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return Center(
                  child: Text(
                    '${index   1}',
                    style: const TextStyle(fontSize: 50),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}
  • Related