Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

Display the below data in List widget flutter and search it

I have below API data display it in Listview and try to search filter in Month Name(date)

[
   {
  "transGroup": 1,
  "transType": 0,
  "serviceTypeId":85,
   },
   {
  "transGroup": 2,
  "transType": 9,
  "serviceTypeId": 78,
 }
]

Search filter

void searchFilter(String enteredKeyword) {
    List results = [];
    if (enteredKeyword.isEmpty) {
      results = myData;
    } else {
      results = myData
          .where(
            (user) => user["date"].toString().contains(
                  enteredKeyword.toLowerCase(),
                ),
          )
          .toList();
    }
  }

Textfield Widget

  TextFormField(
          onChanged: (value) => searchFilter(value),
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
          ),
        ),

initState:

 List _foundUsers = [];
  @override
  initState() {
    _foundUsers = myData;
    super.initState();
  }

My Result-> image

Upvotes: 0

Views: 110

Answers (1)

eamirho3ein
eamirho3ein

Reputation: 17890

For your second issue, lets assume this is your list:

var myData = [
    {
      "transGroup": 1,
      "transType": 0,
      "serviceTypeId": 0,
      "serviceDescription": "Opening Balance",
      "financialYear": "2022/2023",
      "july": 54818.34,
      "august": 54818.34,
      "september": 0,
      "october": 0,
      "november": 0,
      "december": 0,
      "january": 0,
      "febuary": 0,
      "march": 0,
      "april": 0,
      "may": 0,
      "june": 0
    },
    {
      "transGroup": 990,
      "transType": 0,
      "serviceTypeId": 0,
      "serviceDescription": "Closing Balance",
      "financialYear": "2022/2023",
      "july": 54818.34,
      "august": 54818.34,
      "september": 0,
      "october": 0,
      "november": 0,
      "december": 0,
      "january": 0,
      "febuary": 0,
      "march": 0,
      "april": 0,
      "may": 0,
      "june": 0
    }
  ];

you need define this class model:

class BalanceModel {
  final String date;
  final double opening;
  final double closing;
  final double receipts;

  BalanceModel({
    required this.date,
    required this.opening,
    required this.closing,
    required this.receipts,
  });

  static const List months = [
    "january",
    "febuary",
    "march",
    "april",
    "may",
    "june",
    "july",
    "august",
    "september",
    "october",
    "november",
    "december"
  ];

  static List<BalanceModel> getData(List data) {
    List<BalanceModel> result = [];
    for (var month in months) {
      double openValue = 0;
      double closeValue = 0;

      var year = '';

      for (var e in data) {
        if (e['serviceDescription'] == "Opening Balance") {
          var rawYear = e['financialYear'] as String;
          year = rawYear.substring(0, rawYear.lastIndexOf('/'));
          openValue =
              e[month] is int ? double.parse(e[month].toString()) : e[month];
        } else if (e['serviceDescription'] == "Closing Balance") {
          closeValue =
              e[month] is int ? double.parse(e[month].toString()) : e[month];
        }
      }
      result.add(BalanceModel(
          date: "$month $year",
          opening: openValue,
          closing: closeValue,
          receipts: closeValue - openValue));
    }

    return result;
  }
}

you can pass your list to it like this:

var result = BalanceModel.getData(myData);

and then use the result list in listview and create your card widget base on it.

Upvotes: 1

Related Questions