How to group photos by time in Flutter?

Viewed 40

I want the photos taken on the same date to be in the same group. This is my gallery

enter image description here

I want this

enter image description here

  Future<List<VideoImageDataModel>> fetchPhotos() async {
            var dataList = await Historydao().ImageData();
            return dataList;
          }

FutureBuilder<List<VideoImageDataModel>>(
                  future: fetchPhotos(),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      var photoList = snapshot.data;
                      return GridView.builder(
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            childAspectRatio: (10 / 10), crossAxisCount: 4),
                        itemCount: photoList?.length,
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            margin: EdgeInsets.fromLTRB(5, 5, 0, 0),
                            //padding: EdgeInsets.fromLTRB(10, 5, 0, 0),
                            child: Hero(
                              tag: photoList![index].thumbnail,
                              child: GestureDetector(
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => ImagePage(
                                              photoList[index]
                                                  .thumbnail
                                                  .toString())));
                                },
                                child: Stack(fit: StackFit.expand,
                                  children: [
                                    Image.file(
                                      fit: BoxFit.cover,
                                      File(photoList[index].thumbnail.toString()),
                                    ),
                                    Positioned(
                                        right: 3,
                                        bottom: 3,
                                        child: Column(crossAxisAlignment: CrossAxisAlignment.end,
                                          children: [
                                            Text(
                                              '${DateFormat('Hm', 'en_US').format(DateTime.fromMillisecondsSinceEpoch(photoList[index].id))}',
                                              style: const TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 9,
                                                  fontWeight: FontWeight.bold),
                                            ),
                                            Text(
                                              '${DateFormat('dd/MM/yyyy').format(DateTime.fromMillisecondsSinceEpoch(photoList[index].millisecond))}',
                                              style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 9,
                                                  fontWeight: FontWeight.bold),
                                            ), ],),),],),),),);}, );
                    }  else {
                      return const Center(
                        child: CircularProgressIndicator(
                          color: Colors.blue,
                        ),
                      );
                    }
                  },
                ),


  
    

I am creating my gallery using gridview builder.Thumbnail is photo name.I am generating date data using milliseconds.I want to show photos taken on the same day as a group.I can find the changed date using for loop.i don't know how to do this.

0 Answers
Related