Flutter ListView Builder显示设备名称而非ID的实现问题

Hey there! It sounds like you're stuck on showing actual equipment names instead of those random IDs in your ListView. Let's break down the possible issues and fix this step by step.

First, Verify Your Data & Model #

The most common culprit here is that your equipmentName field isn't actually holding the name you expect. Let's check two key things:

1. Check your Equipment model class
   Make sure the field is defined correctly and matches the data you're receiving (e.g., no typos like equipment_name vs equipmentName if you're parsing from JSON). Here's an example of a correct model:

   class Equipment {
     final String id;
     final String equipmentName;
     final int yearsOfUsing;
   
     Equipment({required this.id, required this.equipmentName, required this.yearsOfUsing});
   
     // If parsing from JSON, ensure the keys match your API response
     factory Equipment.fromJson(Map<String, dynamic> json) {
       return Equipment(
         id: json['id'],
         equipmentName: json['equipmentName'], // Double-check this key
         yearsOfUsing: json['yearsOfUsing'],
       );
     }
   }
   

2. Debug your data at runtime
   Add a print statement inside your itemBuilder to see what's actually stored in each equipment object:

   itemBuilder: (context, index) {
     final equipment = _user.getSingleUser.equipments[index];
     print('Equipment at index $index: ${equipment.toString()}'); // Check console output
     // ... rest of your code
   }
   

   If the print shows equipmentName is null or equal to the ID, that means your data isn't being populated correctly when fetching/parsing the user's equipment.

If Your Equipments Only Store IDs (Not Full Objects) #

Sometimes apps store just equipment IDs in the user's data, not the full equipment details. If that's your case, you'll need to map the ID to the corresponding name using a full list of equipment data.

Here's how to adjust your code:

1. Assume you have a list of all available equipment (e.g., fetched from an API or stored locally):

   List<Equipment> allAvailableEquipments = [
     Equipment(id: "1603739590802", equipmentName: "Cordless Drill", yearsOfUsing: 2),
     Equipment(id: "1603739590803", equipmentName: "Circular Saw", yearsOfUsing: 3),
     // ... other equipment entries
   ];
   

2. Modify your itemBuilder to match the ID with the full equipment object:

   itemBuilder: (context, index) {
     final userEquipment = _user.getSingleUser.equipments[index];
     // Find the matching equipment from the full list
     final matchedEquipment = allAvailableEquipments.firstWhere(
       (eq) => eq.id == userEquipment.id,
       // Fallback if no match is found
       orElse: () => Equipment(
         id: userEquipment.id,
         equipmentName: "Unknown Equipment",
         yearsOfUsing: userEquipment.yearsOfUsing,
       ),
     );
   
     return ListTile(
       tileColor: Colors.blue[100],
       onTap: () {
         _addModalBottomSheet(bc, size, userEquipment.id);
       },
       leading: const Icon(Icons.fiber_manual_record_rounded),
       trailing: IconButton(
         onPressed: () {
           singleUser.equipments.removeAt(index);
           _user.setSingleUser(singleUser);
           // Don't forget to notify listeners if using state management like ChangeNotifier!
           // _user.notifyListeners();
         },
         icon: const Icon(
           Icons.close_outlined,
           color: Colors.red,
           size: 20,
         ),
       ),
       title: Text(
         '${matchedEquipment.equipmentName} : ${userEquipment.yearsOfUsing} years',
       ),
     );
   },
   

Final Checks #

• If you're using state management (like Provider, Riverpod, etc.), ensure that updating the user data triggers a UI rebuild (e.g., calling notifyListeners() for ChangeNotifier).
• Double-check that when you fetch the user's equipment data, you're correctly populating the equipmentName field (not just storing the ID there by mistake).

Once you verify these points, your ListView should display the proper equipment names instead of IDs!

内容的提问来源于stack exchange，提问作者sAntd