2022-07-21

How can I store and display my json information in a List Tile each with its respective elements in a format. Flutter/Dart

If there is a better way to store the list I have made, please do help.

The objective is to display the information in each List Tile in the format of :

Code: LE-0000000002,
Description: test_01,
Organisation Unit: 01_01_04_01_SA - Shah Alam,
Date Reported: Date Reported: 18/09/2020,

This is the code to obtain and store the list :

onTap: () async {
                  var newMessage = await (ReadCache.getString(key: 'cache1'));

                  var response = await http.get(
                    Uri.parse(
                        'http://192.168.1.8:8080/HongLeong/MENU_REQUEST.do?_dc=1658076505340&reset_context=1&table_id=25510&id_MenuAction=3&path=%3Cp%20class%3D%22x-window-header-path%22%3ELoss%20Event%3C%2Fp%3E&ViewType=MENU_REQUEST&gui_open_popup=1&id_Window=17&activeWindowId=mw_17&noOrigUserDate=true&LocalDate=20220718&LocalTime=00482500&TimeZone=Asia%2FShanghai&UserDate=0&UserTime=0&server_name=OPRISK_DATACOLLECTOR&key_id_list=&cell_context_id=0&id_Desktop=100252&operation_key=1000184&operation_sub_num=-1&is_json=1&is_popup=0&is_search_window=0&ccsfw_conf_by_user=0&is_batch=0&previousToken=1658069547560&historyToken=1658076505339&historyUrl=1'),
                    headers: {HttpHeaders.cookieHeader: newMessage},
                  );

                  LossEventResponseModel lossEventResponseModel =
                  LossEventResponseModel.fromJson(jsonDecode(response.body));

                  final listNode = lossEventResponseModel.response.genericListAnswer.listNode;

                  List<Map<String, dynamic>> incidentList = [
                    for (final json in listNode.map((x) => x.toJson()))
                      {
                        'Code': json['field'][0]['field_value'],
                        'Description': json['field'][1]['field_value'],
                        'Organisation Unit': json['field'][46]['field_value'],
                        'Date Reported': json['field'][18]['field_value'],
                      }
                  ];



                  final List<String>values =  [];

                  for(final item in incidentList){
                    values.addAll(item.values.map((e) => e.toString()));
                  }
                  await WriteCache.setListString(key: 'cache4', value: values);


                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => LossEvent()));
                }

This is the code to read and display the list :

body: Column(
        children: [
          Expanded(
            child: FutureBuilder(
              future: ReadCache.getStringList(key: 'cache4'),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: ListTile(
                            title: Text(
                                snapshot.data[index],
                                style: GoogleFonts.poppins(
                                  textStyle : const TextStyle(
                                    fontWeight: FontWeight.normal,
                                    fontSize: 20,
                                  ),
                                )
                            ),
                            tileColor: Colors.blueGrey[200],
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10)),
                          ),
                        );
                      });
                } else {
                  return const Text("No Data");
                }
              },
            ),
          ),
        ],
      ),

Instead it is displaying everything in its own list tile separately which isn't the objective here and this is what it is displaying now : enter image description here



No comments:

Post a Comment