Flutter DropdownButton初始提示不显示且选中值异常的问题求解

解决这个问题的核心是用可空类型管理选中状态，配合DropdownButton的hint属性实现初始提示，选中后正常展示选项。具体处理方式如下：

• 定义可空选中变量：将_selectedCar声明为String?类型，初始值设为null，既避免未初始化错误，又能让hint正常显示。
• 配置hint属性：在DropdownButton中添加hint参数，设置初始提示文本。
• 完善选中逻辑：选中选项时将对应字符串赋值给_selectedCar，此时DropdownButton会自动切换为显示选中的车型。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Car Selector')),
        body: const CarDropdown(),
      ),
    );
  }
}

class CarDropdown extends StatefulWidget {
  const CarDropdown({super.key});

  @override
  State<CarDropdown> createState() => _CarDropdownState();
}

class _CarDropdownState extends State<CarDropdown> {
  // 可空类型，初始值为null
  String? _selectedCar;

  // 车型选项列表
  final List<String> _cars = ['Mercedes', 'BMW', 'Audi', 'Toyota'];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: DropdownButton<String>(
        // 初始无选中值时显示提示文本
        hint: const Text("Please select a car"),
        value: _selectedCar,
        isExpanded: true,
        items: _cars.map((String car) {
          return DropdownMenuItem<String>(
            value: car,
            child: Text(car),
          );
        }).toList(),
        onChanged: (String? newValue) {
          setState(() {
            _selectedCar = newValue;
          });
        },
      ),
    );
  }
}

关键说明 #

• 初始状态下_selectedCar为null，DropdownButton会优先显示hint文本。
• 选中任意车型后，_selectedCar被赋值为对应车型字符串，DropdownButton自动切换为显示选中的车型名称。
• 使用String?类型避免了late关键字带来的未初始化错误，完美适配初始无选中值的场景。

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