CODEWITHSUNDEEP
flutterdart
Chad
Chad

Reputation: 685

Flutter -How to make a list of cards that show items per month of every year?

Expense traker

 class Transactions {
  final String id;

  final double amount;
  final String date;


  const Transactions({
    @required this.id,
    @required this.amount,
    @required this.date,
   
  });

  Transactions.fromMap(
    Map map,
  )   : this.id = map['id'],
        this.amount = map['amount'],
        this.date = map['date'],
       

  Map toMap() {
    return {
      // 'color': this.color,
      'id': this.id,
      'amount': this.amount,
      'date': this.date,
     
    };
  }
}

I am trying to make a list of card that tell the user the expenses that have been made in the months of the current year like this:

enter image description here

I have tried this :

    return List.generate(2, (index) {
    
      final weekDay = DateTime.now().subtract(
        Duration(days: index),
      );
      var totalSum = 0.0;

      for (var i = 0; i < widget.transactions.length; i++) {
        if (DateTime.parse(widget.transactions[i].date).year == weekDay.year &&
            DateTime.parse(widget.transactions[i].date).month ==
                weekDay.month) {
          totalSum += widget.transactions[i].amount;
        }
      }

      // for (var i = 0; i < widget.transactions.length; i++) {
      //   totalSum = widget.transactions[index].amount + totalSum;
      // }

      return {
        'day': DateFormat.E().format(weekDay).substring(0, 1),
        'amount': totalSum,
      };
    }).reversed.toList();
  }

  double get totalSpending {
    return groupedTransactionValues.fold(0.0, (sum, item) {
      return sum + item['amount'];
    });
  }

But it is not doing what I want it to do. .........................................................................................................

Upvotes: 0

Views: 974

Answers (2)

Dung Ngo
Dung Ngo

Reputation: 1472

You should clarify what the error you've encountered, not just saying it's not doing what you want.

and this is what i usually do for list of cards:

ListView.builder(
  itemCount: listTransaction.length, // your List
  itemBuilder: (context, index) {
    return Card(                           
      child: Column(
        children: [
          Text(listTransaction[index].date),
          Text(listTransaction[index].amount)
        ]
      )
    );
  },
)

Upvotes: 1

stefanodecillis
stefanodecillis

Reputation: 190

Well, one of the easiest way it's to organize your data in a list in which each element it's a month with related details (i.e. the amount)

example:

class Month{
 int month; //between 1 and 12
 double amount;
}

Therefore, you only need to implement the list in the build function as follows:

build(context){
 return(
 //...
 child: List.builder(
 itemCount: yourlist.length
 itemBuilder: (context, index){
  return YourTileWidget(month: yourlist[index].month, amount: yourlist[index].amount)
    }
   ),
  //...
  );
}

Hope it's what you want to achieve!

Upvotes: 0

Related Questions