Question 77556 in Flutter Question posted in
The official Flutter documentation can be found here.

Put nested JSON in Flutter List and apply search filter on List

I Have Nested JSON List I want to add this list in flutter Widget, I have try it before few days but not found proper solution.

Am sharing with you json Data like below. You can found full json file here

[{
        "month": "July",
        "services": [{
                "name": "Opening Balance",
                "amount": 5566.12
            },
            {
                "name": "Property Rates",
                "amount": 0
            }

        ]
    },
    {
        "month": "August",
        "services": [{
                "name": "Waste Disposal",
                "amount": 0
            },
            {
                "name": "Water Basic",
                "amount": 0
            },
            {
                "name": "Water Metered",
                "amount": 0
            },
            {
                "name": "Interest",
                "amount": 81.63
            },

            {
                "name": "Closing Balance",
                "amount": 6145.05
            }
        ]
    },
    {
        "month": "September",
        "services": [{
                "name": "Opening Balance",
                "amount": 6145.05
            },
            {
                "name": "Property Rates",
                "amount": 107.4
            }

        ]
    },
    {
        "month": "October",
        "services": [{
                "name": "Opening Balance",
                "amount": 6319.27
            },
            {
                "name": "Property Rates",
                "amount": 107.4
            },
            {
                "name": "Sanitation Basic",
                "amount": 0
            },
            {
                "name": "Waste Disposal",
                "amount": 0
            },
            {
                "name": "Water Basic",
                "amount": 0
            },
            {
                "name": "Water Metered",
                "amount": 33.65
            },
            {
                "name": "Interest",
                "amount": 83.04
            },
            {
                "name": "Journal Credit",
                "amount": 0
            },
            {
                "name": "Total",
                "amount": 224.09
            },
            {
                "name": "Closing Balance",
                "amount": 6543.36
            }
        ]
    }

]

I have above string json to dart -> model file here

Expected Result of all list -> image

Expected result after search by month name -> image

Result after search-> image

Listview Code:

   ListView.builder(
                  shrinkWrap: true,
                  itemCount: userList.length,
                  itemBuilder: (context, index) {
                    return   ListTile(
                      title: Text(userList[index]['month']),
                      leading:
                          Text(userList[index]['services'][index]['name']),
                      trailing: Text(userList[index]['services'][index]
                              ['amount']
                          .toString()),
                    );
                  },
                ),

Current Result-> image

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have try it Following Way

    Create Lists:

    List<SearchList> userList = [];
List<SearchList> search = [];

    Search Filter:

     void _runFilter(String enteredKeyword) {
    List<SearchList> results = [];
    if (enteredKeyword.isEmpty) {
      // if the search field is empty or only contains white-space, we'll display all users
      results = userList;
    } else {
      results = userList
          .where((user) =>
              user.month!.toLowerCase().contains(enteredKeyword.toLowerCase()))
          .toList();
      // we use the toLowerCase() method to make it case-insensitive
    }
    // Refresh the UI
    setState(() {
      search = results;
    });
  }

    Widget:

    Column(
      children: [
        TextField(
          onChanged: (value) {
            _runFilter(value);
          },
          controller: editingController,
          decoration: const InputDecoration(
              labelText: "Search",
              hintText: "Search",
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0)))),
        ),
        const SizedBox(
          height: 20,
        ),
        search.isEmpty
            ? TextButton(
                onPressed: () {
                  fetchData();
                },
                child: const Text('Load'),
              )
            : Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: search.length,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(),
                      ),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 5),
                      margin: const EdgeInsets.symmetric(vertical: 5),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            search[index].month.toString(),
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: search[index].services!.length,
                            itemBuilder: (context, index2) {
                              return Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(search[index]
                                      .services![index2]
                                      .name
                                      .toString()),
                                  Text(search[index]
                                      .services![index2]
                                      .amount
                                      .toString()),
                                ],
                              );
                            },
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
      ],
    ),

    You Can Found Full Widget Code here


  2. 0

    First iteration is ok, but you have to iterate again for every month in order to display services…

    Try something like this:

    ListView.builder(
  shrinkWrap: true,
  itemCount: userList.length,
  itemBuilder: (context, index) {
    return ListTile(
     title: Text(userList[index]['month']),
     subtitle: ListView.builder(
       shrinkWrap: true,
       itemCount: userList[index]['services'].length,
       itemBuilder: (context, index2) {
         return Row(
           children: [
             Text(userList[index]['services'][index2]['name']),
             Text(userList[index]['services'][index2]['amount']),
           ]
          ),
         );
       },
      ),

    Regarding the search, you have an example here:
    Listview filter search in Flutter

    Anyway depending on the context of your application I’d suggest you to work with objects and not with maps, and to do the search from the provider and not with a stateful widget.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search