How to categorise a list by the date in flutter

Question

I'm trying to get the json list to be represented by the different date according to when it was uploaded

Just something like this

This is what I have instead I'm trying to group all transaction on the same day to just have one "Today" and the one of tomorrow to just have one "tomorrow" instead of it repeating itself

Container(
                      //color: Colors.black,
                      margin: EdgeInsets.only(
                        left: MediaQuery.of(context).size.width * 0.06,
                        right: MediaQuery.of(context).size.width * 0.06,
                        top: 10,
                      ),
                      child: FutureBuilder(
                        builder: (context, projectSnap) {
                          if (projectSnap.connectionState ==
                                  ConnectionState.none &&
                              projectSnap.hasData == null) {
                            //print('project snapshot data is: ${projectSnap.data}');
                            return Text('Nothing To show Here');
                          } else if (detail == null) {
                            return Center(child: LoadingWidget());
                          } else if (detail == []) {
                            return Center(
                              child: Text('Nohing to show here'),
                            );
                          } else {
                            return ListView.builder(
                                itemCount: detaillenght,
                                itemBuilder: (BuildContext context, int index) {
                                  return SingleChildScrollView(
                                    child: Column(
                                      children: [
                                        Text(
                                          'Today',
                                          style: TextStyle(
                                              color: Theme.of(context)
                                                  .primaryColor
                                                  .withOpacity(.6),
                                              fontSize: 18,
                                              fontWeight: FontWeight.bold),
                                        ),
                                        SizedBox(
                                          height: 10,
                                        ),
                                        listview(context, index, amount,
                                            description, detail),
                                      ],
                                    ),
                                  );
                                });
                          }
                        },
                        future: fetchlist(),
                      ),
                    ),

This is the code for the future builder I used

Future fetchlist() async {
    final prefs = await SharedPreferences.getInstance();
    var token = await prefs.getString("token");
    var response = await networkHandler.get('/getalert', token);

    var data = jsonDecode(response);

    detail = data['Detail'];
    description = data['description'];
    amount = data['amount'];
    date = data['date'];

    print(detail);
    detaillenght = detail.length;
    print(date);
  }

this is the future function it's calling

 [1662392319707, 1662626801573, 1662626802691, 1662626803340, 1662626803835, 1662626829586, 1662626830965]

This is how the date for each list called is arranged

Luis Utrera · Answer

You could use a Map variable declared in the FutureBuilder so you can know whether the date of the current transaction was already built or not, and in every iteration in the ListView, building the text only if it hasn't been built before.

child: FutureBuilder(
  builder: (context, projectSnap) {
    final builtDates={};
    if (projectSnap.connectionState ==
            ConnectionState.none &&
        projectSnap.hasData == null) {
      //print('project snapshot data is: ${projectSnap.data}');
      return Text('Nothing To show Here');
    } else if (detail == null) {
      return Center(child: LoadingWidget());
    } else if (detail == []) {
      return Center(
        child: Text('Nohing to show here'),
      );
    } else {
      return ListView.builder(
          itemCount: detaillenght,
          itemBuilder: (BuildContext context, int index) {
            var shouldBuildDate=false;
            if(builtDates[currentTransactionDate]==null){
              shouldBuildDate=true;
              builtDates[currentTransactionDate]=true;
            }
            return SingleChildScrollView(
              child: Column(
                children: [
                  if(shouldBuildDate)
                  Text(
                    'Today',//convert the date to a text you need here.
                    style: TextStyle(
                        color: Theme.of(context)
                            .primaryColor
                            .withOpacity(.6),
                        fontSize: 18,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  listview(context, index, amount,
                      description, detail),
                ],
              ),
            );
          });
    }
  },
  future: fetchlist(),
  ),

How to categorise a list by the date in flutter

1 Answers