作为 ThemeData 的一部分,我设置了背景颜色。因此,下拉菜单也获得相同的颜色,我希望它与文本字段具有相同的颜色。但是,当我发送下拉列表中的颜色时,标签不再位于顶部,而是与下拉列表的默认值重叠。
如何使下拉菜单的标签转到顶部。
主题数据
theme: ThemeData(
colorSchemeSeed: Colors.blueGrey,
useMaterial3: true,
appBarTheme: AppBarTheme(backgroundColor: Colors.blueGrey,),
scaffoldBackgroundColor: const Color.fromARGB(255, 134, 173, 192),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: Colors.white,
),
)
loadTypeDropdownMenu = DropdownMenu<String>(
inputDecorationTheme: const InputDecorationTheme(
fillColor: Colors.amber,
filled: true,
floatingLabelAlignment: FloatingLabelAlignment.center,
floatingLabelBehavior: FloatingLabelBehavior.always,
floatingLabelStyle: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
)
),
initialSelection: defalutLoadType,
label: const Text('Load Type'),
dropdownMenuEntries: loadTypesEntries,
onSelected: (String? loadType) {
setState(() {
selectedLoadType = loadType;
});
},
);
尝试下面的代码
DropdownButtonFormField<String>(
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.grey),
),
labelText: 'Load Type'),
labelStyle: TextStyle(color: Colors.grey)
value: selected,
items: ["Load", "Pressure", "Work", "Pending", "Completed"]
.map(
(label) => DropdownMenuItem(
child: Text(label),
value: label,
),
)
.toList(),
onChanged: (value) {
setState(() => selected = value);
},
),
结果: