Flutter自定义DropdownButton组件移动端不显示问题求助

我开发了一个类似DropdownButton的Flutter自定义WidgetDropdown组件，在Linux电脑上可正常显示，但在Android模拟器和Pixel真机上完全无法显示。尝试调整样式属性、添加padding都未解决问题，以下是组件代码及使用方式：

组件代码 #

class WidgetDropdown extends StatefulWidget {
  final String text;
  final IconData PickedIcon;
  final List<Widget> children;

  const WidgetDropdown(
      {Key? key,
      required this.text,
      required this.PickedIcon,
      required this.children})
      : super(key: key);

  @override
  _WidgetDropdownState createState() => _WidgetDropdownState();
}

class TextPair extends StatelessWidget {
  final String text1;

  const TextPair({Key? key, required this.text1}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Text(
          text1[0],
          style: TextStyle(
            fontSize: 30,
            color: Colors.white,
          ),
        ),
        Text(
          text1.substring(1),
          style: TextStyle(
            fontSize: 18,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

class _WidgetDropdownState extends State<WidgetDropdown>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  bool _isExpanded = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 160),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.0, end: 0.5).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _toggle() {
    setState(() {
      _isExpanded = !_isExpanded;
      if (_isExpanded) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          InkWell(
            onTap: _toggle,
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(
                    widget.PickedIcon,
                    color: formiconcolor, // 变量未定义
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Text(widget.text), // 未设置文本颜色
                    ),
                  ),
                  RotationTransition(
                    turns: _animation,
                    child: Icon(
                      Icons.arrow_drop_down,
                      color: formiconcolor, // 变量未定义
                    ),
                  ),
                ],
              ),
            ),
          ),
          if (_isExpanded)
            Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Column(
                children: widget.children,
              ),
            ),
        ],
      ),
    );
  }
}

当前使用方式 #

SizedBox(width: double.infinity, child: DropdownList(items: getNickNames(), icon: Icons.restore_from_trash, hint: "Select a car", controller: carcontroller))

问题排查及修复步骤 #

1. 组件名称与参数不匹配
   代码定义的组件是WidgetDropdown，但使用时调用的是DropdownList，且参数（items/icon/hint）和WidgetDropdown要求的（text/PickedIcon/children）完全不对应。修改使用代码：

   SizedBox(
     width: double.infinity,
     child: WidgetDropdown(
       text: "Select a car",
       PickedIcon: Icons.restore_from_trash,
       children: getNickNames(), // 确保getNickNames()返回List<Widget>类型
     )
   )
   

2. 未定义变量导致颜色异常
   代码中formiconcolor未定义，替换为明确的颜色值：

   Icon(
     widget.PickedIcon,
     color: Colors.grey,
   ),
   // 箭头图标同理
   RotationTransition(
     turns: _animation,
     child: Icon(
       Icons.arrow_drop_down,
       color: Colors.grey,
     ),
   ),
   

3. 文本颜色与背景冲突
   给Text(widget.text)添加明确颜色，避免和背景色一致：

   Text(
     widget.text,
     style: TextStyle(color: Colors.black),
   ),
   

4. 布局约束优化
   给外层Column添加mainAxisSize: MainAxisSize.min，避免不必要的布局压缩：

   Column(
     mainAxisSize: MainAxisSize.min,
     children: [
       // 原有代码
     ],
   )
   

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