Flutter封装独立DropdownButton组件并全局使用及错误解决

核心错误原因 #

1. 初始选中值不在下拉选项集合内：initState中selectedCompany=Company()创建了一个空的Company对象，该对象不存在于companies列表里，导致DropdownButton无法匹配到对应的选项，触发断言错误。
2. 自定义类未实现相等判断：Company类默认使用对象引用判断相等，即使两个Company的cId相同，也会被判定为不同对象，DropdownButton无法正确匹配选中值与选项。

分步修复与优化 #

1. 修复初始选中值 #

修改initState，从现有companies列表中选取初始值，而非创建空对象：

@override
void initState() {
  selectedCompany = companies[0]; // 直接使用列表中的第一个元素作为初始选中值
  companyListDropDownItems = buildCompanyList(companies);
  super.initState();
}

2. 给Company类添加相等判断 #

重写==运算符和hashCode，基于唯一标识cId判断对象相等：

class Company {
  int? cId;
  String? cName;

  Company({this.cId, this.cName});

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Company &&
          runtimeType == other.runtimeType &&
          cId == other.cId;

  @override
  int get hashCode => cId.hashCode;
}

3. 优化自定义Dropdown组件 #

增强组件灵活性，支持空安全与样式自定义：

import "package:flutter/material.dart";

class MyDropDown<T> extends StatelessWidget {
  final List<DropdownMenuItem<T>> items;
  final T? value; // 改为可空类型，支持未选中状态
  final String hintText;
  final ValueChanged<T?> onChanged;
  final TextStyle? hintStyle; // 可选提示文本样式
  final Color? borderColor; // 可选边框颜色

  MyDropDown({
    Key? key,
    required this.items,
    this.value,
    required this.hintText,
    required this.onChanged,
    this.hintStyle,
    this.borderColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10.0),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: borderColor ?? Colors.grey,
          width: 0.3,
        ),
        borderRadius: const BorderRadius.all(Radius.circular(30.0)),
      ),
      child: DropdownButton<T>(
        hint: Text(
          hintText,
          style: hintStyle ?? const TextStyle(),
        ),
        isExpanded: true,
        value: value,
        items: items,
        onChanged: onChanged,
        underline: const SizedBox(), // 移除默认下划线
        icon: const Icon(Icons.arrow_drop_down),
      ),
    );
  }
}

4. 正确使用优化后的组件 #

在页面中使用时，无需强制解包选中值，可直接传入：

MyDropDown<Company>(
  hintText: 'Company',
  value: selectedCompany,
  items: companyListDropDownItems,
  onChanged: onChangeActivityListDropDownItem,
  hintStyle: const TextStyle(color: Colors.grey),
  borderColor: const Color.fromRGBO(49, 87, 110, 1.0),
),

全局复用自定义Dropdown组件 #

1. 独立组件文件：将MyDropDown类保存到lib/widgets/custom_dropdown.dart文件中。
2. 全局导入使用：在任意需要使用的页面中导入该文件：

import 'package:your_project_name/widgets/custom_dropdown.dart';

3. 统一全局样式：可创建样式常量类，统一管理组件样式：

class DropdownGlobalStyles {
  static const TextStyle hintStyle = TextStyle(color: Colors.grey, fontSize: 14);
  static const Color borderColor = Color.fromRGBO(49, 87, 110, 1.0);
}

使用时直接引用常量：

MyDropDown<Company>(
  hintText: 'Company',
  value: selectedCompany,
  items: companyListDropDownItems,
  onChanged: onChangeActivityListDropDownItem,
  hintStyle: DropdownGlobalStyles.hintStyle,
  borderColor: DropdownGlobalStyles.borderColor,
),

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