overlayColor has no effect #239
Description
Hi, I'm using dropdown_button2 in a project and it has been wonderful. Thank you for your work on this great library. I've come across a single issue and that is that overlayColor appears to have no effect on the button. I want to be able to change the color of the button whenever it is hovered over or focused, and the description of overlayColor implies it can do that, but it seems to have no effect at all.
Flutter: 3.16.9
dropdown_button2: 3.0.0-beta.10
Attached below is a reproducible example:
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
final MaterialStateProperty<Color?> overlayColor = MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.focused)) {
return const Color.fromARGB(255, 255, 0, 0);
} else if (states.contains(MaterialState.hovered)) {
return const Color.fromARGB(255, 0, 255, 115);
}
return null;
},
);
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> values = ['Test 1', 'Test 2', 'Test 3', 'Test 4'];
String value = 'Test 2';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('My Project'),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'My Project',
style: TextStyle(fontSize: 12.0, height: 1.0),
),
Container(
height: 28.0,
width: 200,
margin: const EdgeInsets.only(top: 6.0),
child: DropdownButtonHideUnderline(
child: DropdownButton2<String>(
isExpanded: true,
hint: Row(
children: [
Expanded(
child: Text(
value,
style: const TextStyle(fontSize: 14.0, height: 1.0, color: Colors.white),
),
),
],
),
items: values
.map(
(String item) => DropdownItem<String>(
value: item,
height: 40,
child: Text(
item,
style: const TextStyle(fontSize: 14.0, height: 1.0, color: Colors.white),
),
),
)
.toList(),
value: value,
onChanged: (ret) {
setState(() {
value = ret!;
});
},
buttonStyleData: ButtonStyleData(
height: 50,
width: 200,
padding: const EdgeInsets.only(left: 8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
border: Border.all(
color: Colors.white.withAlpha(150),
),
color: const Color.fromARGB(255, 36, 68, 109),
),
overlayColor: overlayColor,
),
dropdownStyleData: DropdownStyleData(
maxHeight: 300,
width: 200,
isOverButton: true,
padding: EdgeInsets.zero,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
color: const Color.fromARGB(255, 36, 68, 109),
),
),
menuItemStyleData: MenuItemStyleData(
padding: const EdgeInsets.only(left: 8.0),
overlayColor: overlayColor,
),
),
),
),
],
),
),
);
}
}