Arranging icons from cloud firestore in flutter
ajnabz
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)
(2)
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!
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Laravel 8 babel unexpected token '<' and ';' expected on className
- Next: Can you publish an npm package for a frontend JavaScript file?
Related
Related Related
- 1
FetchData From Cloud FireStore Firebase in flutter (dart)
- 2
Query a single document from Firestore in Flutter (cloud_firestore Plugin)
- 3
FieldValue arrayUnion and Cloud FireStore with Flutter
- 4
Flutter - Update values of maps and arrays in Cloud firestore
- 5
Cloud Firestore query to get doc ID, Flutter
- 6
Arranging data from an array to an object
- 7
Arranging icons inside a folder on Windows wherever I want
- 8
Why is Windows 10 auto-arranging my icons so often?
- 9
Import collections from cloud storage to firestore
- 10
Retrieving Complex Documents from Cloud Firestore
- 11
Not receiving data from Cloud Firestore but there is the data
- 12
Flutter cloud_firestore persistence is not working even if it is enabled
- 13
Unable to get data from Firestore using Flutter
- 14
Flutter: Cannot use Firestore.instance even after importing the package(cloud_firestore)
- 15
Flutter: Cannot use Firestore.instance even after importing the package(cloud_firestore)
- 16
How to get data from cloud firestore then filter it, map it then return it?
- 17
Not able to set text in edit text from cloud firestore?
- 18
How to import data from cloud firestore to the local emulator?
- 19
Cloud Firestore - How to get relational data from two collections?
- 20
How to get data from firestore to google cloud functions?
- 21
Trying to get values from cloud Firestore using keyvalue (Angular)
- 22
How to correctly display the date of a list from Cloud Firestore?
- 23
How to stop a value from a Cloud Firestore database to be printed multiple times?
- 24
How to copy all documents from one collection to other in Firestore -Flutter?
- 25
Flutter app keeps disconnecting from firestore after brief time
- 26
How to get all records from Yesterday's date in Firestore Flutter?
- 27
how to fetch data from firestore array of a document with flutter?
- 28
How can i get only my messages from firestore in Flutter
- 29
Find n nearest locations in flutter: local database (Sqlite) in combination with Cloud Firestore vs Firebase Realtime Database
Comments