firestore map to StreamBuilder => ListView.Builder - firebase

i want to show the songs list inside document (singer that user clicked on). Every song should load in list tile but all of them load in one tile.
and it loads the 'songs list' from all documents(all singers).
this is the FireStore DB
this is list of singers to choose from.
this should show only the songs from selected singer each one in a tile but shows all songs from all singers. and every singers song in one tile
class SongsList extends StatefulWidget {
#override
_SongsListState createState() => _SongsListState();
}
class _SongsListState extends State<SongsList> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder(
stream: Firestore.instance.collection('singers').snapshots(),
builder: (
context,
snapshot,
) {
if (snapshot.data == null)
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.teal),
),
);
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/back.png'), fit: BoxFit.contain)),
child: ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
var result = snapshot.data.documents[index]['songs list'];
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(
left: 10, right: 10, top: 10, bottom: 0),
child: Container(
height: 50,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.5),
spreadRadius: 1.5,
blurRadius: 1.5,
//offset: Offset(0, 1), // changes position of shadow
),
],
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: Colors.red[200],
width: 0.5,
style: BorderStyle.solid)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
for (var res in result.entries)
Text(
res.key,
style: TextStyle(
fontSize: 20, color: Colors.red[500]),
),
]),
),
),
);
}),
);
},
),
);
}
}

If you want to get only the songs of one singer, then you need to specify the document id to retrieve one document, change this:
stream: Firestore.instance.collection('singers').snapshots(),
into this:
stream: Firestore.instance.collection('singers').document('aryana sayeed').snapshots(),

List tile has a corresponding index. I think you might have to build a list tile instead of a container. If you need a container, you have to write a code that would specifically get the singers name (documentID) wired on each container

Related

i want to create a listview with firebase in flutter that will show title subtitle and image and when user click on listview that will open a webview

I sm creating a flutter app where i want to create a listview with firebase in flutter that will show title subtitle and image and when user click on listview that will open a webview but I want the web view URL should come from the firebase title subtitle and the image part already working I stuck in the URL part please help how to do this
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:watched_movie_list/Widget/webviewx.dart';
class ListviewPage extends StatefulWidget {
final firBaseLists;
final String webviewTitle;
final String weburl;
ListviewPage(
{this.firBaseLists, required this.webviewTitle, required this.weburl});
#override
_ListviewPageState createState() => _ListviewPageState();
}
class _ListviewPageState extends State<ListviewPage> {
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: FirebaseFirestore.instance.collection('listview').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: CupertinoActivityIndicator(
radius: 20,
),
);
}
return Scaffold(
appBar: AppBar(
title: Text(
' नवीनतम सूचनाएं',
style: TextStyle(color: Colors.black),
),
leading: BackButton(color: Colors.black),
backgroundColor: Colors.white,
),
body: Container(
height: 800,
color: Color(0xfff5f5f5),
child: ListView(
children: snapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data =
document.data()! as Map<String, dynamic>;
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InAppWebViewx(
title: widget
.firBaseLists["${data['titletext']}"],
url: widget.firBaseLists("${data['url']}"),
)));
},
child: Container(
height: 150,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(18)),
margin:
EdgeInsets.only(top: 8, right: 12, left: 12, bottom: 2),
child: Row(
children: [
Container(
padding: const EdgeInsets.only(top: 15, left: 20),
height: 150,
width: 330,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network(
"${data['img']}",
height: 40,
width: 40,
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
"${data['titletext']}",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
"${data['subtitle']}",
maxLines: 2,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
),
],
),
),
);
}).toList(),
),
),
);
},
);
}
}```
You should use Listview.builder instead of Listview. Inside the Listview.builder you could capture the data with index of the itemBuilder and pass it to the WebView. Here's the link to get started on Listview.builder https://www.geeksforgeeks.org/listview-builder-in-flutter/

Error is not showing after scanning a item thats not on the firestore database

I did this personal project of mine where a barcode scanner would scan for data inside firestore database. I have this problem when I scanned a barcode thats not on the database it wont show the error message is just shows a empty scan item container which I made. Let me know if someone can figure why. I tried everything still couldnt fix it.
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection("products")
.where("barcode", isEqualTo: '$barcodeScanRes')
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Dialog(
child: Container(
height: 300,
child: Text('Product Not Found'),
),
);
} else {
return Dialog(
child: Container(
height: 350,
child: Column(children: [
Container(
height: 350,
width: 165,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
DocumentSnapshot products =
snapshot.data!.docs[index];
return ScanCard(products: products);
},
)),
]),
),
);
#Scan Card
class ScanCard extends StatelessWidget {
const ScanCard({
Key? key,
required this.products,
}) : super(key: key);
final DocumentSnapshot products;
#override
Widget build(BuildContext context) {
final user = FirebaseAuth.instance.currentUser;
String _userId = user!.uid;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 180,
width: 160,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(16)),
child: Image.network(products['img']),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20.0 / 4),
child: Text(
products['name'],
style: TextStyle(
color: Colors.blueGrey,
fontSize: 18,
),
),
),
Column(
children: [
Text(
"Size: " + products['size'],
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Colors.brown),
),
SizedBox(
width: 30,
),
],
),
Row(
children: [
Text(
"\tRs. " + products['price'],
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
SizedBox(
width: 40,
),
Icon(
Icons.add_shopping_cart,
color: Colors.black,
size: 25,
),
],
),
SizedBox(
width: 10,
),
SizedBox(
child: Padding(
padding: const EdgeInsets.all(10),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.red,
child: Text(
"Add to cart",
style: TextStyle(color: Colors.white),
),
onPressed: () {
DocumentReference documentReference = FirebaseFirestore.instance
.collection('userData')
.doc(_userId)
.collection('cartData')
.doc();
documentReference.set({
'uid': FirebaseAuth.instance.currentUser!.uid,
'barcode': products['barcode'],
'img': products['img'],
'name': products['name'],
'size': products['size'],
'price': products['price'],
'id': documentReference.id
}).then((result) {
addToCartMessage(context).then((value) => {
Navigator.pop(context)
});
}).catchError((e) {
print(e);
});
},
),
),
)
],
);
}
}
The thing is you are showing Product not found based on the condition:- !snapshot.hasData but this conditon means that data is being fetched so at this time rather show a progress indicator.
And to handle when data is not present in backend then add another condition:- if(snapshot.data.docs.isEmpty) and here show your dialogbox of Product not found...
Final Code Snippet will look like:-
if (!snapshot.hasData)
return Center(child:CircularProgressIndicator));//or return a black container if you don't want to show anything while fetching data from firestore
else if (snapshot.data.docs.isEmpty) {
return Dialog(
child: Container(
height: 300,
child: Text('Product Not Found'),
),
);
} else {
return Dialog(
child: Container(
height: 350,
child: Column(children: [
Container(
height: 350,
width: 165,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
DocumentSnapshot products =
snapshot.data!.docs[index];
return ScanCard(products: products);
},
)),
]),
),
);
}

how to fetch data from firestore array of a document with flutter?

this is my users collection in cloud fire store:
users collection
this is the function that gets users from users collection in firestore
Stream<QuerySnapshot> fetchUsersInSearch() {
return Firestore.instance.collection('users').snapshots();
}
i use this method
final emailResults = snapshot.data.documents
.where((u) => u['email'].contains(query));
in the following streamBuilder to fetch users by their email.
i have this streamBuilder to populate the data on screen
return StreamBuilder<QuerySnapshot>(
stream: DatabaseService().fetchUsersInSearch(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
final emailResults = snapshot.data.documents
.where((u) => u['email'].contains(query));
if (!snapshot.hasData) {
return Container(
color: Theme.of(context).primaryColor,
child: Center(
child: Text(
'',
style: TextStyle(
fontSize: 16, color: Theme.of(context).primaryColor),
),
),
);
}
if (emailResults.length > 0) {
return Container(
color: Theme.of(context).primaryColor,
child: ListView(
children: emailResults
.map<Widget>((u) => GestureDetector(
child: Padding(
padding: const EdgeInsets.all(0.1),
child: Container(
padding: EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
border: Border(
bottom: BorderSide(
width: 0.3, color: Colors.grey[50]))),
child: ListTile(
leading: CircleAvatar(
backgroundColor:
Theme.of(context).primaryColor,
backgroundImage:
NetworkImage(u['userAvatarUrl']),
radius: 20,
),
title: Container(
padding: EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(u['email'],
style: TextStyle(
fontSize: 16,
color: Theme.of(context)
.accentColor),
overflow: TextOverflow.ellipsis),
SizedBox(
height: 5,
),
],
),
),
),
),
),
onTap: () {
showUserProfile(u['id']);
},
))
.toList(),
),
);
} else {
return Container(
color: Theme.of(context).primaryColor,
child: Center(
child: Text(
'No results found',
style: TextStyle(
fontSize: 16,
color: Theme.of(context).accentColor,
),
),
),
);
}
});
this is working perfectly and fetching users inside a listView by their email...
p.s: the (query) is a string i type in a seach bar.
how can i make a query to fetch users by their otherUsernames...the second field in the screenshot of the users collection ?!
i tried this:
final otherUsernamesResults = snapshot.data.documents
.where((u) => u['otherUsernames'].contains(query));
but its returning this error:
The method 'contains' was called on null.
Receiver: null
Tried calling: contains("#username1")
what am i doing wrong here ?!!
any help would be much appreciated..
Try this:-
Stream<QuerySnapshot> getUsers() {
final usersCollection = FirebaseFirestore.instance.collection('users');
return usersCollection.where('otherUsernames', arrayContainsAny: ['username1', 'username2']);
}
For firestore version 0.16.0

Flutter: How to solve type 'List<NetworkImage>' is not a subtype of type 'Widget'

When i am trying to run the code for connecting carousel with Firestore
the error is showing like this '' 'List' is not a subtype of type 'Widget' '' or if there is any other way to connect cloud firestore with carousel images so that i can change my images using firestore.
class About extends StatelessWidget {
List<NetworkImage> _listOfImages = <NetworkImage>[];
#override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Scaffold(
appBar: AppBar(
title: Text(
'About',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
centerTitle: true,
backgroundColor: Colors.white,
iconTheme: IconThemeData(
color: Colors.black, //change your color here
),
),
body: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
left: SizeConfig.safeBlockHorizontal * 5,
top: SizeConfig.safeBlockHorizontal * 5,
right: SizeConfig.safeBlockHorizontal * 5),
child: Material(
borderRadius: BorderRadius.circular(24.0),
child: SizedBox(
width: SizeConfig.safeBlockHorizontal * 80,
height: SizeConfig.safeBlockHorizontal * 100,
child: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('About').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
_listOfImages = [];
for (int i = 0;
i < snapshot.data.documents[index].data['image'].length;
i++
)
{
_listOfImages.add(NetworkImage(snapshot
.data.documents[index].data['image'][i]));
}
return Carousel(
boxFit: BoxFit.contain,
dotBgColor: Colors.transparent,
dotIncreasedColor: Colors.grey,
dotSize: 6.0,
images: [
_listOfImages
],
You are facing that error as you already have declared
List<NetworkImage> _listOfImages = <NetworkImage>[];
which mens _listOfImages have List type of NetworkImage
And you need to pass List type to parameter to images argument in your Carousel widget.
So you are doing it as
images: [
_listOfImages
],
Mens you are passing 2D array in that argument by mistake.
Please just pass images: _listOfImages, and it will solve your problem.
You need to do this instead..
images: _listOfImages,
You just need to remove [ ] from image : [ _listOfImages ];
do this instead
return Carousel(
boxFit: BoxFit.contain,
dotBgColor: Colors.transparent,
dotIncreasedColor: Colors.grey,
dotSize: 6.0,
images:
_listOfImages,
);

Flutter Gridview button functionality to new screen with Firebase

I've made a Gridview using Firebase and Streambuilder and Gridview.builder. This grid displays album titles, the album cover art for each album, and the artists that make each album. I'd like for each grid tile to be able to be pressed and navigate to a separate page with its specific album details. The plan was on press, the app would be able to identify the entire document the grid tile was referring to, move to a new page, and display the document in full to unveil the album details. The thing is, I don't know how to do that. Since snapshot.data.documents[index]['Title'] worked when iterating though all the documents to create the gridview, I thought that typing snapshot.data.documents[index] would work, but it just displays Instance of 'DocumentSnapshot' in the debug console. I'm out of ideas on how to tackle this, so any suggestions are welcome
My code is shown below
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final Services services = Services();
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: bgcolour,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: Icon(Icons.menu),
title: Text("Home"),
actions: <Widget>[
Padding(padding: EdgeInsets.all(10), child: Icon(Icons.more_vert))
],
),
body: StreamBuilder(
stream: Firestore.instance.collection('music').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text("Loading...");
return GridView.builder(
itemCount: snapshot.data.documents.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, childAspectRatio: 0.655172413),
//cacheExtent: 1000.0,
itemBuilder: (BuildContext context, int index) {
var url = snapshot.data.documents[index]['Cover Art'];
return GestureDetector(
child: Container(
width: 190.0,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32)),
color: hexToColor(
snapshot.data.documents[index]['Palette'][0]),
elevation: 1,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(height: 12),
ClipRRect(
borderRadius: BorderRadius.circular(21.0),
child: Image.network(url,
height: 180.0, width: 180)),
SizedBox(height: 10),
Text(
snapshot.data.documents[index]['Artist']
.join(', '),
textAlign: TextAlign.center,
style: GoogleFonts.montserrat(
textStyle: TextStyle(color: Colors.white),
fontSize: 14,
fontWeight: FontWeight.w300)),
SizedBox(height: 10),
Text(snapshot.data.documents[index]['Title'],
style: GoogleFonts.montserrat(
textStyle: TextStyle(color: Colors.white),
fontSize: 16,
fontWeight: FontWeight.w600),
textAlign: TextAlign.center),
],
),
),
),
onTap: () {
print("Tapped ${snapshot.data.documents[index]}");
},
);
},
);
}
),
);
}
}
Is there an ID for your snapshot.data.documents[index]? If yes, add it to the end.
onTap: () {
print("Tapped ${snapshot.data.documents[index]['the property you want']}");
},

Resources