Flutter State changing but page doesn't changes - flutter

Question

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

Answer 1

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.