Flutter future builder duplicating document item at every refresh - firebase

Question

I am populating a list of orders from firestore database in flutter. but order screen is doubling the documents at every refresh. Kindly help.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class FullOrder extends StatelessWidget {
const FullOrder({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
// it enable scrolling on small device
return Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('orders').get(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done ||
snapshot.hasData) {
List<QueryDocumentSnapshot> docs = (snapshot.data! as QuerySnapshot).docs;
return ListView.builder(
shrinkWrap: true,
itemCount: docs.length,
itemBuilder: (context, index) {
var data = docs[index].data();
var dataOrders = data['orders'] as List<dynamic>;
var mappedDataOrders = dataOrders.map((o) => (o as Map<String, dynamic>)).toList();
return Card(
child: Container(
padding: const EdgeInsets.all(4),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Order Id: ${data['orderId']}'),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Order Date: ${DateFormat('dd/MM/yyyy').format(data['createdAt'].toDate())}'),
Text('Order Time: ${DateFormat('hh:mm a').format(data['createdAt'].toDate())}'),
],),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Name: ${data['name']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('Contact: ${data['phoneNumber'].toString()}', style: const TextStyle(fontWeight: FontWeight.bold),),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Delivery Slot', style: TextStyle(fontWeight: FontWeight.bold),),
Text('${data['deliverySlot']}'),
],
),
Column(
children: [
Text('Address: ${data['addressType']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('${data['address']}'),
Text('${data['area']}'),
Text('${data['city']}')
],
)
],
),
...List.generate(
mappedDataOrders.length,
(index) {
var order = mappedDataOrders[index] as Map<String, dynamic>;
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(order['title']),
Text(order['unit'].toString()),
Text(order['quantity'].toString()),
Text(order['price'].toString()),
],
),
],
);
}
)
]
),
)
);
}
);
}
return const Center(
child: SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
strokeWidth: 5
)
)
);
}
),
);
}
}

Answer 1

When you convert the Database list to map instead of converting to toList() USE toSet(), this helps you out to filter out the duplicating item.
{
// use toSet() to filter the duplicated items.
var mappedDataOrders = dataOrders.map((o) => (o as Map<String, dynamic>)).toSet();
}

Answer 2

Use the .clear(); Because everytime you load youre map instead of restarting the counter id adds to it.
Where you create youre load mappedDataOrdes. You migth have it like this.
Future<List<Database>> searchDatabase() async{
final url= Uri.https(_baseUrl, 'Database.json');
final resp = await http.get(url);
final Map<String,dynamic> databaseMap= jsonDecode(resp.body);
////This is where you migth use the .clear() this will reset the counter for the index and eliminate duplicate
database.clear();
database.forEach((key, value) {
final tempDatabase= Database.fromMap(value);
tempDatabase.id=key;
database.add(tempDatabase);
});
return negocio;
}