Question 76036 in Flutter Question posted in
The official Flutter documentation can be found here.

how to diplay photos with same date in ListView in flutter

As you can see in Firestore there is a collection called Photos and all photos have a property called DateCreated, How we can just show photos with the same date in the listView?

Ps. I don’t want to hardcode the date in the query : something like this collection('photos).where('').isequalto('date')

class SweetList extends StatefulWidget {
  const SweetList({
    super.key,
  });

  @override
  State<SweetList> createState() => _SweetListState();
}

class _SweetListState extends State<SweetList> {
  String transparentEmoji = 'assets/images/poo2.png';
  final Stream<QuerySnapshot> _photoStream = FirebaseFirestore.instance
      .collection('photos')
      .orderBy('dateCreated')
      .snapshots();

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return StreamBuilder<QuerySnapshot?>(
        stream: _photoStream,
        builder: (context, snapshot) {
          return Container(
            color: Colors.black,
            child: ListView.builder(
              itemCount: snapshot.data!.docs.length,
              itemBuilder: ((context, index) {
                final data =
                    snapshot.data?.docs[index].data()! as Map<String, dynamic>;
                return Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                  child: GestureDetector(
                    onTap: () {
                      dialog(context);
                    },
                    child: Container(
                      height: 400,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        color: Colors.white,
                        image: DecorationImage(
                            image: NetworkImage('${data['imgUrl']}'),
                            fit: BoxFit.fill),
                      ),
                    ),
                  ),
                );
              }),
            ),
          );
        });
  }

enter image description here

How we can just show photos with the same date in the listView?

Tags:

2

Answers


  1. 0

    I dont quite get your use case, but this might help with your need

    1. Use grouped list – https://pub.dev/packages/grouped_list
    • query everything
    • group them in list using grouped list by Date, you can see the screenshot for example

    enter image description here

    1. Create flow that user will have to select which date to filter – then query by the date selected by user. Its not hardcoding the date, but instead you will be passing dynamic date to the query

    2. Change the query to group by default, but dont query all images at once, instead provide a date range for it

    Login or Signup to reply.
  2. 0

    Interesting question! I think it make sense to break down the problem into:

    1. Figure out what are all the unique dates.
    I am not sure you could get that directly from Firestore query, therefore I think you would just get all the documents first and then create a list of unique dates.

    2. Sort the items into unique date buckets.

    3. Display the photos in each bucket.
    Now that yo have a list of unique dates you can then pick the unique date you want and sort the main list of photos for that date (or a list made up of unique dates and each unique date has list of photos)

     void main() {
photos.forEach((p) {

listOfDates.add(p.date);
});

uniquelistOfDates = listOfDates.toSet().toList();

print(uniquelistOfDates);
  
  
for (var d in uniquelistOfDates) {
  
  List<Photo> photosOnDate = [];
  
  for (var p in photos) {
    if (p.date == d) {
      photosOnDate.add(p);
    }
    
  }
    
    map[d] = photosOnDate;
  
}
  
  print(map);
 
  
}

Map map = Map<num, List<Photo>>();


List<num> listOfDates = [];
List<num> uniquelistOfDates = [];


class Photo{
String uid, imgURL;
num date;

Photo({ 
   required this.uid,
   required this.imgURL,
   required this.date
   });
}

List<Photo> photos = [

Photo(date: 160000, uid: "aaa", imgURL: "url1"),
Photo(date: 160000, uid: "bbb", imgURL: "url2"),
Photo(date: 170000, uid: "ccc", imgURL: "url3"),
Photo(date: 170000, uid: "ddd", imgURL: "url4"),
Photo(date: 180000, uid: "eee", imgURL: "url3"),
Photo(date: 180000, uid: "fff", imgURL: "url4"),

];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search