I have an AlertDialog with icons in that are from cloud firestore. I am struggling to change the layout of the icons so that it looks normal. (1) is what is currently being shown and (2) is what I am wanting to achieve.

(1)enter image description here

(2)enter image description here

This is my code:

Widget _buildPopupDialog(BuildContext context) {
    return Scaffold(
        body: StreamBuilder(
            stream: FirebaseFirestore.instance.collection('icons').snapshots(),
            builder: (context, snapshot) {
              return new AlertDialog(
                content: SingleChildScrollView(
                  child: new Container(
                      height: 500,
                      width: 300,
                      child: new ListView(
                        children: snapshot.data.documents
                            .map<Widget>((DocumentSnapshot document) {
                          return new MoodButton(
                            iconData: (IconData(document.data()['ref'],
                                fontFamily: 'MaterialIcons')),
                            onTap: () => print("Mood"),
                          );
                        }).toList(),
                      )),
                ),
              );
            }));

Any help would be greatly appreciated!


Solution 1: Kennedypz

You should use GridView instead of ListView. Set the crossAxisCount property to 3 and you should get the result you want. If you have any doubts, you can find GridView's doc here