Problem with using icons from cloud firestore in flutter app - flutter

Question

I am currently displaying a list of icons in an Alert Dialog within a control_point Daily Button. I want to display all of the buttons I have in my cloud firestore within the Alert Dialog but due to the way I have laid out the code, this means that for each icon in the database, the Daily Goals widget is repeated, as shown in the image below:
Edit: The second image is the desired layout
If you click on the first control point button, it shows the first icon that is in the database and it is repeated 4 times. Then if you click the second control point button, it shows the next icon that is in the database as shown in the images below. This is repeated for all of the icons in the database. I am wanting to have all of the icons in one Alter Dialog.
This is my code:
class _MyHomePageState3 extends State<MyHomePage3> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF030164),
appBar: AppBar(centerTitle: true, title: Text('Project')),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('icons').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return LinearProgressIndicator();
return _buildList(context, snapshot.data.docs);
},
);
}
Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
return ListView(
children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);
}
Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
final record3 = Record3.fromSnapshot(data);
int iconCode = record3.ref;
List<IconData> _iconsDaily = [
Icons.shopping_cart,
Icons.cake_rounded,
Icons.card_giftcard,
Icons.control_point,
];
return Padding(
child: new Container(
child: new ListView(
children: <Widget>[
new Text(
"Daily Goals",
),
new Container(
child: new ListView(
scrollDirection: Axis.horizontal,
children: new List.generate(4, (int index) {
return new Positioned(
child: new DailyButton(
onTap: () {
if (_iconsDaily[index] == Icons.control_point) {
showDialog(
context: context,
builder: (BuildContext context) =>
_buildPopupDialog(context, data),
);
}
},
iconData: _iconsDaily[index]
),
);
}),
),
),
],
),
),
);
}
Widget _buildPopupDialog(BuildContext context, DocumentSnapshot data) {
final record3 = Record3.fromSnapshot(data);
int iconCode = record3.ref;
return new AlertDialog(
content: SingleChildScrollView(
child: new Container(
child: GridView.count(
children: new List.generate(4, (int index) {
return new Positioned(
child: new MoodButton(
onTap: () => print("Mood"),
iconData: (IconData(iconCode, fontFamily: 'MaterialIcons')),
),
);
}),
),
),
),
);
}
}
class Record3 {
final String name;
final int ref;
final bool display;
final DocumentReference reference;
Record3.fromMap(Map<String, dynamic> map, {this.reference})
: assert(map['name'] != null),
assert(map['ref'] != null),
assert(map['display'] != null),
name = map['name'],
ref = map['ref'],
display = map['display'];
Record3.fromSnapshot(DocumentSnapshot snapshot)
: this.fromMap(snapshot.data(), reference: snapshot.reference);
#override
String toString() => "Record<$name:$ref:$display>";
}
If anyone would be able to give any advice for restructing the code so that it only shows one Daily Goals and would be able to include all of the icons within the alert dialog, that would be amazing!