Flutter State changing but page doesn't changes-CodePudding

I'm trying to scrape a website using the package web_scraper, where I want the user to click a button and the new link opens where new scrapped images can be shown.

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

@override
State<Top2> createState() => _Top2State();
}

class _Top2State extends State<Top2> {
 late List<Map<String, dynamic>> top2Wall;
 bool top2Loaded = false;
 int page = 2;

void top2Fetch() async {
final top2Scraper = WebScraper('https://mobile.alphacoders.com');

if (await top2Scraper
    .loadWebPage('/by-category/3?page=$page&quickload=1')) {
  top2Wall = top2Scraper.getElement('div.item > a > img', ['src', 'title']);

  // ignore: avoid_print
  print(top2Wall);
  setState(() {
    top2Loaded = true;
  });
}
  }

 @override
  void initState() {
   super.initState();
   top2Fetch();
}

 @override
 Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return Scaffold(
    body: top2Loaded

        // ignore: sized_box_for_whitespace
        ? Container(
            height: screenSize.height,
            width: double.infinity,
            child: SingleChildScrollView(
              physics: const BouncingScrollPhysics(),
              child: Wrap(children: [
                for (int i = 1; i < top2Wall.length; i  )
                  WallCard(src: top2Wall[i]['attributes']['src']),
                InkWell(
                  onTap: () {
                    setState(() {
                      page  ;
                      
                      // ignore: avoid_print
                      print(page);
                    });
                  },
                  child: Container(
                      height: 100,
                      width: 100,
                      decoration: const BoxDecoration(color: Colors.cyan)),
                )
              ]),
            ),
          )
        : const Center(
            child: CircularProgressIndicator(color: Colors.cyanAccent),
          ));
    }[image2][1]
    }

For a clear explanation I want to change the page link for scraping, so basically the page number=1 i want to increase it by a number, when user clicks on the container. I used SetState and page to increment it by a digit everytime the user clicks on it. I used the print statement to check wether the page increments or not and its sucessfully increases but the page remains same, for clear code view please refer these images enter image description here

enter image description here

CodePudding user response：

If I understand what your issue is, after calling increment page in setstate, you have to call top2Fetch() again inside the onTap method. Like this:

onTap: ()async {
setState(()=>page  );
await top2Fetch();
}

Then update your UI.

You can include a bool value called isLoading in the onTap method: such that when you call the top2Fetch method , a loading spinner is shown on the UI till the future is done.