I try to get the snapshot of an array and I get it But when I display it in my app It’s in vertical as describe in the
image:
And This is the normal one in my cloud firestore (I want to display it in an horizontal ofcourse)
And here's the
code:
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("groups")
.doc(groupId)
.snapshots(),
builder: (context,
AsyncSnapshot<DocumentSnapshot> snapshot) {
var userDocument = snapshot.data?["members"];
if (!snapshot.hasData) {
return Container();
}
return ListView.builder(
//physics: const BouncingScrollPhysics(),
itemCount: userDocument.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return StreamBuilder<DocumentSnapshot>(
stream: FirebaseFirestore.instance
.collection("users")
.doc(userDocument[index])
.snapshots(),
builder: (context, snapshot1) {
var userDocument = snapshot1.data?['fullName'];
if (snapshot1.data == null) {
return const Text('No Data');
}
return ListView.builder(
itemCount: userDocument.length,
shrinkWrap: true,
itemBuilder: (context, index) {
//Where I display the name in app
return Center(
child:
Text(userDocument[index]));
});
});
});
})
Please take a look at the code
Give your ListView.builder a height by wrapping it inside a SizedBox.
Then inside your ListView.builder, there is a parameter scrollDirection: Axis.horizontal,. Next, you can disable scrolling too.
Related
I have a array here and I want to show all of it accepted for the first one as discibe in an image:
And this is the code:
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("groups")
.doc(groupId)
.snapshots(),
builder:(context, AsyncSnapshot<DocumentSnapshot> snapshot) {
var userDocument = snapshot.data?["members"];
return ListView.builder(
scrollDirection: Axis.horizontal,
physics:const BouncingScrollPhysics(),
itemCount: userDocument.length,
shrinkWrap:true,
itemBuilder:(context, index) {
//Where I display all my list of members
return Text(userDocument[index]);
}),
This is what it's look like in simulator
But it still displays all of it And I dont want to display the first one
Try the following code:
ListView.builder(
itemCount: userDocument.length,
itemBuilder: (BuildContext context, int index) {
return index == 0 ? Container() : write your code here;
},
),
Just tell it that the item count is one less, and then access the document one higher index. Like
return ListView.builder(
scrollDirection: Axis.horizontal,
physics:const BouncingScrollPhysics(),
itemCount: userDocument.length - 1,
shrinkWrap:true,
itemBuilder:(context, index) {
//Where I display all my list of members
return Text(userDocument[index + 1]);
}),
here you can skip the index 0 and display rest
ListView.builder(
itemCount: userDocument.length,
itemBuilder: (BuildContext context, int index) {
if(index == 0) {
// return container();
} else {
return Text(userDocument[index]);
}
},
),
You can skip the first index by
StreamBuilder(
stream: FirebaseFirestore.instance
.collection("groups")
.doc(groupId)
.snapshots(),
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
var userDocument = snapshot.data?["members"];
if(userDocument.isNotEmpty){
userDocument.remove(userDocument.first);
}
return ListView.builder(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemCount: userDocument.length,
shrinkWrap: true,
itemBuilder: (context, index) {
//Where I display all my list of members
return Text(userDocument[index]);
});
});
I am trying to have a list of data that is being returned by firebase basically represented on screen as a collection of filterable tags. The problem is when using wrap inside of my list view I am still get just a horizontal list of chips.
Light Grey is what I am after, dark grey is what is being returned
FutureBuilder _buildSubCategories() {
return FutureBuilder(
future: cats
.doc(widget.catId)
.collection('sub-categories')
.orderBy('name')
.get(),
builder: (ctx, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator.adaptive());
} else {
return ListView.builder(
itemCount: snapshot.data.docs.length,
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, idx) {
// DocumentSnapshot cat = snapshot.data.docs[index];
return Wrap(
children: snapshot.data.docs
.map((item) => ActionChip(
label: Text(item['name']),
))
.toList()
.cast<Widget>(),
);
});
}
});
}
You do not need to use list view for that. You could simply use Wrap. Wrap widget pushes the overflown widget to next line
Example:
FutureBuilder _buildSubCategories() {
return FutureBuilder(
future: cats
.doc(widget.catId)
.collection('sub-categories')
.orderBy('name')
.get(),
builder: (ctx, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator.adaptive());
} else {
return Wrap(
children: snapshot.data.docs
.map((item) => ActionChip(
label: Text(item['name']),
))
.toList()
.cast<Widget>(),
);
}
});
}
I was trying to fetch messages and users at the same time for showing current user's conversations and who he/she talked with. The problem is whatever I did, I keep getting this error. Currently there is two message doc in the collection. It fetches from the messages with no problem but it can not read the "users" collection second time.
Widget build(BuildContext context) {
final FirebaseAuth auth = FirebaseAuth.instance;
final User? user = auth.currentUser;
final userID = user!.uid;
return StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('messages')
.where('senderID', isEqualTo: userID)
.snapshots(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (!snapshot.hasData) {
return Text("no data at the moment");
}
return Column(children: [
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
print('another user id:');
print(snapshot.data!.docs[index]['anotherUserID']);
return ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('users')
.where('userID',
isEqualTo: snapshot.data!.docs[index]
['anotherUserID'])
.snapshots(),
builder: (context, snap) {
if (!snap.hasData) return const Text("Loading...d");
print(snap.data!.docs[index]['profileImage']);//it prints the information
print(snap.data!.docs[index]['name']); //of first chat but second one
print(snap.data!.docs[index]['username']); //doesn't printed
print(snapshot.data!.docs[index]['lastMessage']);
print(snapshot.data!.docs[index]['timestamp']);
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
snap.data!.docs[index]['profileImage']),
),
title: Text(snap.data!.docs[index]['name']),
);
}),
],
);
}),
]);
},
);
And this is how screen look like:screen
I have a StreamBuilder connected to a List and the List gets its data from Firebase, but every there is an Event in my Database the items in my Streambuilder get Duplicated.
Here is my StreamBuilder code:
StreamBuilder(
stream: masterListStart().asStream(),
builder: (context, snapshot) {
//return coursesList.length == 0
return finishedLoadingList
? ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: storysList.length,
itemBuilder: (context, index) {
//
StoryItems data = storysList[index];
//
return StoryItems(
data: data,
);
},
)
: CircularProgressIndicator();
},
),
How I can prevent the StreamBuilder from doing this?
Instead of using finishedLoadingList, you can simply check your snapshot connectionState as following
StreamBuilder(
stream: masterListStart().asStream(),
builder: (context, snapshot) {
//return coursesList.length == 0
return (ConnectionState.done == snapshot.connectionState) ? ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: storysList.length,
itemBuilder: (context, index) {
//
StoryItems data = storysList[index];
//
return StoryItems(
data: data,
);
},
) : CircularProgressIndicator();
},
),
I want to show the List when getting the data from the firestore.
StreamBuilder(
stream: Firestore.instance
.collection("messages")
.document(groupChatId)
.collection(groupChatId)
.orderBy('timestamp', descending: true)
.limit(20)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.red)));
} else {
return ListView.builder(
itemCount: snapshot.data.documents,
itemBuilder: (context, index) =>
buildItem(index, snapshot.data.documents[index]),
reverse: true,
controller: listScrollController,
);
I can successfully post the data in the firestore but dont know why i can't retreive it
Issue is with this line
itemCount: snapshot.data.documents,
try
itemCount: snapshot.data.length
itemCount is as it sounds, the number of items to appear in your list, the parameter requires an int not an object