I have 7 rows when I out the page and go again to the same page it show 14 rows - flutter

Question

I have problem, when I run the code it works but when I out from the page and go back it show x2 for the rows its looping without any loop I make in my database 7 rows when I out and return to the same page it shows 14 rows but I have onlu 7 rows.
This is my code:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class my_ads extends StatefulWidget {
const my_ads({Key? key}) : super(key: key);
#override
State<my_ads> createState() => _my_adsState();
}
List list = [];
int select_item = 0;
class _my_adsState extends State<my_ads> {
#override
Future MyAds() async {
final response =
await http.get(Uri.parse('https://***.***.***.**/getData.php'));
if (response.statusCode == 200) {
var red = jsonDecode(response.body);
setState(() {
list.addAll(red);
});
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load Ads');
}
}
#override
void initState() {
super.initState();
GetData();
}
GetData() async {
await MyAds();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
margin: const EdgeInsets.only(left: 70, right: 60, top: 50),
height: 54.0,
width: 224.0,
child: Container(
decoration: BoxDecoration(
border:
Border.all(color: const Color(0xffF4AC47), width: 5),
color: const Color(0xff42A9D2),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40))),
child: const Center(
child: Text(
"MyAds",
style: TextStyle(
fontSize: 25,
color: Color(0xff072A52),
fontFamily: 'Cairo'),
textAlign: TextAlign.center,
),
//end logo
)),
),
const SizedBox(
height: 35,
),
Expanded(
child: ListView.builder(
itemCount: list.length,
itemBuilder: ((cts, i) {
return Column(
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
height: 180.0,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xff42A9D2), width: 5),
borderRadius: BorderRadius.circular(8)),
child: Row(
children: [
const Expanded(
flex: 3,
child: Image(
image: AssetImage("assets/book.jpg"),
),
),
Expanded(
flex: 6,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"${list[i]["book_name"]}",
style: TextStyle(
fontSize: 20, color: Colors.black87),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text("${list[i]["collage"]}"),
const Icon(Icons.perm_identity_rounded)
],
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text("${list[i]["loc"]}"),
const Icon(Icons.store)
],
),
],
),
)
],
),
),
),
const SizedBox(height: 16),
],
);
}),
),
),
],
),
);
}
}
I tried to add this method to my PHP code $mysqli_connect-> close();
But its not working
This is my PHP code:
<?php
include("config.php");
$sql = "SELECT book_name,loc,com,spe,collage FROM ads";
$res = $connect->query($sql);
while($row = $res -> fetch_assoc()) {
$data[]=$row;
}
echo json_encode($data);
$mysqli_connect-> close();
?>

Answer 1

You declared list outside. It will maintain its state even when you change screens.
Either you declared it inside the state widget or replace :
list.addAll(red);
by :
list = red;