如何在Flutter的DropdownMenu选项前添加不同图标？

直接用DropdownMenuEntry自带的leadingIcon属性就能实现，不用换其他组件，具体改造步骤如下：

1. 先把纯文本的选项列表改成包含文本+对应图标的结构化数据，比如用List<Map>来存储：

   final List<Map<String, dynamic>> menuItems = [
     {'label': 'One', 'icon': Icons.home},
     {'label': 'Two', 'icon': Icons.settings},
     {'label': 'Three', 'icon': Icons.notifications},
     {'label': 'Four', 'icon': Icons.person},
   ];
   

2. 生成下拉选项时，给每个DropdownMenuEntry设置leadingIcon，把对应图标传进去；同时给DropdownMenu本身设置leadingIcon，让选中后的按钮也显示对应图标，和你要的效果一致。

完整修改后的代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatefulWidget {
  MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  // 定义包含文本和对应图标的选项数据
  final List<Map<String, dynamic>> menuItems = [
    {'label': 'One', 'icon': Icons.home},
    {'label': 'Two', 'icon': Icons.settings},
    {'label': 'Three', 'icon': Icons.notifications},
    {'label': 'Four', 'icon': Icons.person},
  ];
  
  late Map<String, dynamic> selectedItem;

  @override
  void initState() {
    super.initState();
    selectedItem = menuItems.first;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: DropdownMenu<Map<String, dynamic>>(
              // 选中状态下显示对应图标
              leadingIcon: Icon(selectedItem['icon']),
              initialSelection: menuItems.first,
              onSelected: (Map<String, dynamic>? value) {
                setState(() {
                  selectedItem = value!;
                });
              },
              dropdownMenuEntries: menuItems.map((item) {
                return DropdownMenuEntry(
                  value: item,
                  label: item['label'],
                  // 每个下拉选项前的图标
                  leadingIcon: Icon(item['icon']),
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

关键修改说明 #

• 用结构化数据替代纯字符串列表，方便每个选项绑定专属图标
• 给每个DropdownMenuEntry设置leadingIcon属性，实现下拉选项前的图标展示
• 给DropdownMenu设置leadingIcon，让选中后的按钮同步显示对应图标，和示例效果匹配

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