Flutter：如何通过循环Map生成含双组件的Cupertino Picker行

Hey there! Let's get that repetitive CupertinoPicker code cleaned up so it's easier to update later. Here's a straightforward solution plus some improvements to your data structure:

Step 1: Fix Your Data Source (Avoid Mismatched Indexes!) #

Right now you're using two separate lists (problemListIcons and problemListNames) which is risky—if you ever reorder or add items, you might accidentally mismatch icons and text. Instead, use a single source of truth: either a custom class (best for type safety) or a Map (since you mentioned your original data is a String-to-Icon map).

Option A: Custom Class (Recommended) #

Create a small class to wrap each picker option:

class ProblemOption {
  final String name;
  final Icon icon;

  ProblemOption({required this.name, required this.icon});
}

Then update your BuildingProblem class to use this list:

class BuildingProblem {
  static final List<ProblemOption> problemOptions = [
    ProblemOption(name: "Your First Problem", icon: Icon(Icons.some_icon)),
    ProblemOption(name: "Second Issue", icon: Icon(Icons.another_icon)),
    // Add all your remaining options here
  ];
}

Option B: Use Your Existing Map #

If you want to stick with your original String-to-Icon Map:

class BuildingProblem {
  static final Map<String, Icon> problemMap = {
    "First Problem": Icon(Icons.some_icon),
    "Second Issue": Icon(Icons.another_icon),
    // ... your other entries
  };
}

Step 2: Generate Picker Children Dynamically #

Now you can replace all those manual Row widgets with a single map call to generate them automatically.

Using the Custom ProblemOption List #

Expanded(
  child: CupertinoPicker(
    itemExtent: 40,
    // Convert each ProblemOption to a Row with one line of code
    children: BuildingProblem.problemOptions.map((option) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          option.icon,
          Padding(
            padding: const EdgeInsets.only(left: 10),
            child: Text(
              option.name,
              style: const TextStyle(color: Colors.white70),
            ),
          ),
        ],
      );
    }).toList(), // Convert the Iterable to a List<Widget>
    onSelectedItemChanged: (int index) {
      // Now you can easily access the selected option's data!
      final selected = BuildingProblem.problemOptions[index];
      print('Selected: ${selected.name}');
    },
    looping: true,
    backgroundColor: const Color(0xff2e3032),
  ),
)

Using the Map #

If you went with the Map approach:

Expanded(
  child: CupertinoPicker(
    itemExtent: 40,
    children: BuildingProblem.problemMap.entries.map((entry) {
      final problemName = entry.key;
      final problemIcon = entry.value;
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          problemIcon,
          Padding(
            padding: const EdgeInsets.only(left: 10),
            child: Text(
              problemName,
              style: const TextStyle(color: Colors.white70),
            ),
          ),
        ],
      );
    }).toList(),
    onSelectedItemChanged: (int index) {
      final entries = BuildingProblem.problemMap.entries.toList();
      final selected = entries[index];
      print('Selected: ${selected.key}');
    },
    looping: true,
    backgroundColor: const Color(0xff2e3032),
  ),
)

Bonus: Make It Reusable #

If you need this icon+text picker item elsewhere in your app, extract it into a reusable widget to keep your code DRY:

class PickerIconTextItem extends StatelessWidget {
  final String text;
  final Icon icon;

  const PickerIconTextItem({super.key, required this.text, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        icon,
        Padding(
          padding: const EdgeInsets.only(left: 10),
          child: Text(
            text,
            style: const TextStyle(color: Colors.white70),
          ),
        ),
      ],
    );
  }
}

Then use it in your picker like this:

children: BuildingProblem.problemOptions.map((option) {
  return PickerIconTextItem(text: option.name, icon: option.icon);
}).toList(),

This way, if you ever want to tweak the layout (like changing padding or text style), you only have to update one place!

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