Search code examples
flutterflutter-layout

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


Solution

  • 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.